子组件向父组件的同等级组件传值？-灵析社区
练习代码二十年有一个父组件 A，上面有两个子组件，B 和 C。 在子组件 B 上有一个子组件 D，其中 D 里面有一个 textarea 在子组件 C 上有一个按钮，点击这个按钮获取 D 里面 textarea 的值。 我尝试的两个方案 * 方案一：可以通过直接操作 dom 来解决 * 方案二：通过 D 将 textarea 的值传递给 B，然后由 B 传给 A，再有 A 传给 C，但总是传不成功。 请问我的这个需求，还有其它什么更优的解决方案吗？多谢。
今天吃什么你说吧两种方式来实现。
1. 一种是层层传值
在顶级组件 A 组件中用 "const [value, setValue] = useState("")"来存储textarea中的值，然后将value和
setValue传递到D组件中，同时将value给到C组件，这样C组件就能获取到textarea中的值了。
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241012/044b07d10600a5c5425c5a2600482dbd.png)
2. React中的context
React中自带处理上下文的hook，可以把A组件中的 value 和 setValue 传递到任意的子组件。
1. 先用 "createContext()" 来创建生产者，这个来包裹住所有要用到更新数据的组件；
2. 用 "useContext()" 或 "Consumer" 来使用数据；
const { useState } = require("react");
// store.js
const TextareaContext = React.createContext(""); // 传入初始值，这里只存储textarea的值，因此可以默认是空字符窜
// A组件中
const AppA = () => {
const [value, setValue] = useState("");
// 把 value 和 setValue 传递过去
return (
);
};
// B组件中不用任何处理，直接引用即可
// D组件
const AppD = () => {
const { value, setValue } = useContext(TextareaContext);
return ;
};
// C组件
const AppC = () => {
const { value } = useContext(TextareaContext);
return alert(value)}>get;
};