当前位置：首页 > React

react如何获取子组件的state

2026-01-26 01:00:47React

获取子组件 state 的方法

在 React 中，直接获取子组件的 state 是不推荐的做法，因为这会破坏组件的封装性。但可以通过以下方式实现类似功能：

使用回调函数

父组件通过 props 传递一个回调函数给子组件，子组件在 state 变化时调用该回调函数：

// 父组件
function Parent() {
  const handleChildStateChange = (childState) => {
    console.log('Child state:', childState);
  };

  return <Child onStateChange={handleChildStateChange} />;
}

// 子组件
function Child({ onStateChange }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    onStateChange(count);
  }, [count, onStateChange]);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

使用 ref 和 useImperativeHandle

通过 ref 暴露子组件的特定方法，让父组件可以主动获取状态：

// 子组件
const Child = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  useImperativeHandle(ref, () => ({
    getState: () => ({ count })
  }));

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
});

// 父组件
function Parent() {
  const childRef = useRef();

  const handleClick = () => {
    const childState = childRef.current?.getState();
    console.log('Child state:', childState);
  };

  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Get Child State</button>
    </>
  );
}

状态提升

将共享状态提升到最近的共同父组件中：

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Child count={count} onCountChange={setCount} />
      <div>Parent knows child state: {count}</div>
    </>
  );
}

function Child({ count, onCountChange }) {
  return (
    <button onClick={() => onCountChange(c => c + 1)}>
      Count: {count}
    </button>
  );
}

使用 Context API

对于深层嵌套组件，可以使用 Context 共享状态：

const CountContext = createContext();

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Child />
      <div>Parent knows child state: {count}</div>
    </CountContext.Provider>
  );
}

function Child() {
  const { count, setCount } = useContext(CountContext);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}