react组件之间如何传值

父组件向子组件传值

通过 props 传递数据。父组件在子组件标签上定义属性，子组件通过 props 接收。

父组件示例：

function Parent() {
  const data = "Hello from Parent";
  return <Child message={data} />;
}

子组件示例：

function Child(props) {
  return <div>{props.message}</div>;
}

子组件向父组件传值

通过父组件传递的回调函数实现。父组件定义函数并通过 props 传递给子组件，子组件调用该函数并传参。

父组件示例：

function Parent() {
  const handleData = (data) => {
    console.log(data); // 接收子组件数据
  };
  return <Child onSendData={handleData} />;
}

子组件示例：

function Child({ onSendData }) {
  const data = "Hello from Child";
  return <button onClick={() => onSendData(data)}>Send</button>;
}

兄弟组件间传值

通过共同的父组件中转。将数据提升到父组件，再通过 props 分发给兄弟组件。

父组件示例：

function Parent() {
  const [sharedData, setSharedData] = useState("");
  return (
    <>
      <SiblingA onSendData={setSharedData} />
      <SiblingB data={sharedData} />
    </>
  );
}

跨层级组件传值

使用 Context API 或状态管理库（如 Redux）。

Context API 示例：

const DataContext = createContext();

function App() {
  const value = "Global Data";
  return (
    <DataContext.Provider value={value}>
      <Child />
    </DataContext.Provider>
  );
}

function Child() {
  const data = useContext(DataContext);
  return <div>{data}</div>;
}

通过状态管理库传值（如 Redux）

适用于复杂应用。通过全局 Store 管理状态，组件通过 useSelector 和 useDispatch 读写数据。

示例：

// Store 中定义状态和 reducer
// 组件中调用 action 更新状态
import { useSelector, useDispatch } from 'react-redux';

function Component() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch({ type: 'UPDATE_DATA', payload: 'New Data' })}>
      Update
    </button>
  );
}

通过 ref 传值

父组件通过 useRef 创建引用，传递给子组件直接访问 DOM 或实例方法。

示例：

function Parent() {
  const childRef = useRef();
  const handleClick = () => {
    childRef.current.doSomething(); // 调用子组件方法
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Trigger</button>
    </>
  );
}

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    doSomething: () => console.log("Child method called")
  }));
  return <div>Child</div>;
});