React 中子组件如何向父组件同等级组件传值？

发布日期： 2024-10-25 阅读量： 作者： 网络

react 中子组件如何向父组件同等级组件传值？

从子组件向父组件同等级组件传值：更优解决方案

在 react 中，当需要将数据从子组件传递到父组件的不同等级组件时，可以采用以下两种更优的解决方案：

1. 层层传值

在根组件中，使用 usestate() 来存储需要共享的数据。将这个数据和它的更新函数依次传递给各个子组件，直到需要使用数据的子组件。

2. react 上下文

使用 react 自带的 context api。通过创建一个上下文对象，将数据传递到任何需要访问它的组件中。

代码示例：

// A 组件（根组件）
const AppA = () => {
  const [value, setValue] = useState("");

  return (
    <TextareaContext.Provider value={{ value, setValue }}>
      <B />
      <D />
    </TextareaContext.Provider>
  );
};

// B 组件（中间组件，不处理数据）
const AppB = () => {
  return <D />;
};

// D 组件（叶子组件，存储数据）
const AppD = () => {
  const { value, setValue } = useContext(TextareaContext);

  return <textarea value={value} onChange={setValue} />;
};

// C 组件（叶子组件，获取数据）
const AppC = () => {
  const { value } = useContext(TextareaContext);

  return <button onClick={() => alert(value)}>获取</button>;
};

上一篇: 如何为WordPress插件添加订阅功能

下一篇: 如何使用WordPress插件实现即时推送功能

React 中子组件如何向父组件同等级组件传值？

随便看看