React组件传值方法

在React中，有几种主要的方式可以在组件之间传递数据：

1. Props（从父组件到子组件）

这是最基本和最常用的方法。父组件可以将数据作为props传递给子组件。

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

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

2. 回调函数（从子组件到父组件）

父组件可以将一个函数作为prop传递给子组件，子组件可以调用这个函数来向父组件传递数据。

// 父组件
function Parent() {
  const handleChildData = (data) => {
    console.log("Data from child:", data);
  };

  return <Child onChildData={handleChildData} />;
}

// 子组件
function Child(props) {
  const sendDataToParent = () => {
    props.onChildData("Hello from child");
  };

  return <button onClick={sendDataToParent}>Send data to parent</button>;
}

3. Context API（跨多层组件传值）

当需要将数据深入传递到组件树中，而不想通过中间组件手动传递props时，可以使用Context API。

import React, { createContext, useContext } from 'react';

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

// 父组件
function Parent() {
  const data = "Hello from context";
  return (
    <DataContext.Provider value={data}>
      <Child />
    </DataContext.Provider>
  );
}

// 子组件
function Child() {
  return <GrandChild />;
}

// 孙组件
function GrandChild() {
  const data = useContext(DataContext);
  return <p>{data}</p>;
}

4. 状态管理库（如Redux或MobX）

对于更复杂的应用，可以使用状态管理库来处理组件间的数据传递。这里以Redux为例：

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Reducer
const reducer = (state = { message: '' }, action) => {
  switch (action.type) {
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
};

// Store
const store = createStore(reducer);

// 父组件
function App() {
  return (
    <Provider store={store}>
      <Parent />
    </Provider>
  );
}

// 子组件
function Parent() {
  const dispatch = useDispatch();
  
  const setMessage = () => {
    dispatch({ type: 'SET_MESSAGE', payload: 'Hello from Redux' });
  };

  return (
    <div>
      <button onClick={setMessage}>Set message</button>
      <Child />
    </div>
  );
}

// 孙组件
function Child() {
  const message = useSelector(state => state.message);
  return <p>{message}</p>;
}

5. 自定义Hooks（组件间共享逻辑和状态）

自定义Hooks可以用来在不同组件间共享逻辑和状态。

import { useState, useEffect } from 'react';

// 自定义Hook
function useSharedData() {
  const [data, setData] = useState('');

  useEffect(() => {
    // 模拟异步数据获取
    const timer = setTimeout(() => setData('Shared data'), 1000);
    return () => clearTimeout(timer);
  }, []);

  return data;
}

// 组件A
function ComponentA() {
  const sharedData = useSharedData();
  return <p>{sharedData}</p>;
}

// 组件B
function ComponentB() {
  const sharedData = useSharedData();
  return <p>{sharedData}</p>;
}

这些方法各有优缺点，适用于不同的场景。选择哪种方法取决于你的应用结构和需求。