react如何实现父子传值

父组件向子组件传值

父组件通过props将数据传递给子组件。在父组件中，通过子组件的属性传递数据。

父组件代码示例：

import Child from './Child';

function Parent() {
  const message = "Hello from Parent";

  return (
    <div>
      <Child message={message} />
    </div>
  );
}

子组件通过props接收数据：

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

子组件向父组件传值

子组件通过调用父组件传递的回调函数，将数据传回父组件。

父组件代码示例：

import Child from './Child';

function Parent() {
  const handleData = (data) => {
    console.log("Data from child:", data);
  };

  return (
    <div>
      <Child onData={handleData} />
    </div>
  );
}

子组件调用父组件传递的函数：

function Child(props) {
  const sendData = () => {
    props.onData("Data from Child");
  };

  return (
    <button onClick={sendData}>Send Data to Parent</button>
  );
}

使用Context跨层级传值

对于深层嵌套的组件，可以使用React Context避免逐层传递props。

创建Context：

import { createContext } from 'react';

const MyContext = createContext();

父组件提供值：

function Parent() {
  return (
    <MyContext.Provider value="Shared Value">
      <Child />
    </MyContext.Provider>
  );
}

子组件消费值：

import { useContext } from 'react';

function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

使用Ref获取子组件实例

父组件可以通过ref直接访问子组件的实例和方法。

父组件代码：

import { useRef } from 'react';
import Child from './Child';

function Parent() {
  const childRef = useRef();

  const callChildMethod = () => {
    childRef.current.childMethod();
  };

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={callChildMethod}>Call Child Method</button>
    </div>
  );
}

子组件需要使用forwardRef暴露方法：

import { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => {
      console.log("Child method called");
    }
  }));

  return <div>Child Component</div>;
});