react如何组件传值

父子组件传值（Props）

父组件通过属性（props）向子组件传递数据。子组件通过props接收父组件传递的值。

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

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

子组件向父组件传值（回调函数）

父组件通过传递回调函数给子组件，子组件调用该函数并传递数据。

// 父组件
function Parent() {
  const handleData = (data) => {
    console.log(data); // "Hello from Child"
  };
  return <Child onSendData={handleData} />;
}

// 子组件
function Child({ onSendData }) {
  return <button onClick={() => onSendData("Hello from Child")}>Send</button>;
}

兄弟组件传值（状态提升）

通过将共享状态提升到共同的父组件中，再通过props分发给子组件。

// 父组件
function Parent() {
  const [sharedData, setSharedData] = useState("");

  return (
    <>
      <SiblingA onDataChange={setSharedData} />
      <SiblingB data={sharedData} />
    </>
  );
}

// 子组件A
function SiblingA({ onDataChange }) {
  return <button onClick={() => onDataChange("Updated")}>Update</button>;
}

// 子组件B
function SiblingB({ data }) {
  return <div>{data}</div>;
}

Context API（跨层级传值）

适用于深层嵌套组件或全局状态共享。

// 创建Context
const MyContext = createContext();

// 父组件提供数据
function Parent() {
  return (
    <MyContext.Provider value="Context Value">
      <Child />
    </MyContext.Provider>
  );
}

// 子组件消费数据
function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

使用状态管理库（Redux、MobX等）

适用于复杂应用的状态管理，实现任意组件间的数据共享。

// Redux示例
// store.js
const store = createStore(reducer);

// 组件中获取和更新数据
function Component() {
  const data = useSelector((state) => state.data);
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch({ type: "UPDATE", 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 Child</button>
    </>
  );
}

// 子组件需使用forwardRef
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    doSomething: () => console.log("Child method called")
  }));

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