## 如何在 React 中实现从父组件到同级子组件的传值？

从父组件传值到同级子组件的最佳实践

在应用开发中，有时我们需要向同级子组件传递数据。本文将探讨两种实现此需求的有效方案。

1. 层层传值

此方法涉及将数据从父组件逐层传递给目标子组件。首先，在父组件中创建一个状态来存储数据。然后，将此状态及其更新函数传递给中间子组件，再将数据传递给目标子组件。

2. react context

react context 是一种内置的机制，可为组件之间的通信提供一个全局存储。使用 context，您可以将数据从提供程序组件传播到其中的所有子组件。目标子组件只需直接使用该数据即可。

代码演示

层层传值：

// 父组件
<a>
  <b>
    <d>
      <textarea />
    </d>
  </b>
  <c />
</a>

// 子组件 d
function d(props) {
  const { setvalue } = props;
  return <textarea onchange={e => setvalue(e.target.value)} />;
}

// 子组件 c
function c(props) {
  const { value } = props;
  return <button onclick={() => alert(value)}>获取值</button>;
}

react context：

// 父组件
<TextareaContext.Provider value={value}>
  <B />
  <D />
  <C />
</TextareaContext.Provider>

// 子组件 D
function D() {
  const { value, setValue } = useContext(TextareaContext);
  return <textarea value={value} onChange={e => setValue(e.target.value)} />;
}

// 子组件 C
function C() {
  const { value } = useContext(TextareaContext);
  return <button onClick={() => alert(value)}>获取值</button>;
}

这两种方法都可以在 react 中有效地实现从父组件向同级子组件传递数据。选择哪种方法取决于您应用程序的具体需求和偏好。