当前位置：首页 > news >正文

WHAT - 受控组件和非受控组件

news 2025/10/23 18:40:18

文章目录

子组件实现
父组件使用方式
- 情况 1：非受控使用（自己内部管理）
- 情况 2：受控使用（父组件控制）
这样设计的好处

场景：有一个react组件，他的功能是有一个title和Content，后者基于一个hidden的状态来控制。我现在希望这个组件内部支持toggle之外，父组件也可以去控制。怎么实现比较好？

这是一个非常经典的“受控 + 非受控组件”场景。

组件内部有一个 hidden 状态，可以通过自身的 toggle 来控制显示/隐藏；
父组件也可以通过传入 props 来控制 hidden 状态；
当父组件不传时，组件自行管理状态；当父组件传了时，组件跟随父组件状态变化。

推荐的实现方式是使用 “受控优先 + 非受控兜底” 模式。

子组件实现

import React, { useState, useEffect } from "react";interface ToggleBoxProps {title: string;hidden?: boolean; // 受控defaultHidden?: boolean; // 非受控onToggle?: (nextHidden: boolean) => void;
}const ToggleBox: React.FC<ToggleBoxProps> = ({title,hidden: controlledHidden,defaultHidden = false,onToggle,children
}) => {// 内部状态，仅当父组件不传 controlledHidden 时生效const [uncontrolledHidden, setUncontrolledHidden] = useState(defaultHidden);const isControlled = controlledHidden !== undefined;const effectiveHidden = isControlled ? controlledHidden : uncontrolledHidden;const handleToggle = () => {const next = !effectiveHidden;if (!isControlled) {setUncontrolledHidden(next);}onToggle?.(next);};return (<div style={{ border: "1px solid #ccc", padding: "8px" }}><divstyle={{ cursor: "pointer", fontWeight: "bold" }}onClick={handleToggle}>{title} {effectiveHidden ? "▼" : "▲"}</div>{!effectiveHidden && <div>{children}</div>}</div>);
};export default ToggleBox;

父组件使用方式

情况 1：非受控使用（自己内部管理）

export default function App() {return (<ToggleBox title="非受控组件"><p>这是一段内容，点击标题可以展开/收起</p></ToggleBox>);
}

情况 2：受控使用（父组件控制）

import React, { useState } from "react";
import ToggleBox from "./ToggleBox";export default function App() {const [hidden, setHidden] = useState(false);return (<><button onClick={() => setHidden((prev) => !prev)}>父组件控制 {hidden ? "展开" : "收起"}</button><ToggleBoxtitle="受控组件"hidden={hidden}onToggle={(next) => setHidden(next)}><p>这段内容跟随父组件变化</p></ToggleBox></>);
}