react函数兄弟组件间通信
在 React 中，兄弟组件之间的通信可以通过共同的父组件作为中间人来实现。下面给出两种常见的方法：
1. 使用父组件作为中间人：父组件可以通过 props 将数据传递给子组件，然后子组件通过回调函数将数据传递给另一个子组件。
```jsx
// Parent.js
import React, { useState } from "react";
import Child1 from "./Child1";
import Child2 from "./Child2";
function Parent() {
  const [data, setData] = useState("");
  const handleDataChange = (newData) => {
    setData(newData);
  };
  return (
    <div>
      <Child1 onDataChange={handleDataChange} />
      <Child2 data={data} />
    </div>
  );
}
export default Parent;
```
```jsx
// Child1.js
import React, { useState } from "react";
function Child1({ onDataChange }) {
  const [inputValue, setInputValue] = useState("");
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };
  const handleButtonClick = () => {
    onDataChange(inputValue);
  };
  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>Send Data</button>
    </div>
  );
react组件之间通信}
export default Child1;
```
```jsx
// Child2.js
import React from "react";
function Child2({ data }) {
  return <div>{data}</div>;
}
export default Child2;
```
2. 使用 Context：可以使用 React 的 Context API 在父组件中创建一个上下文，并在兄弟组件中订阅该上下文以获取数据。
```jsx
// MyContext.js
import React from "react";
const MyContext = ateContext();
export default MyContext;
```
```jsx
// Parent.js
import React, { useState } from "react";
import MyContext from "./MyContext";
import Child1 from "./Child1";
import Child2 from "./Child2";
function Parent() {
  const [data, setData] = useState("");
  return (
    <MyContext.Provider value={{ data, setData }}>
      <Child1 />
      <Child2 />
    </MyContext.Provider>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。