react如何传值

父组件向子组件传值

使用 props 传递数据。父组件通过属性传递值，子组件通过 props 接收。

父组件示例：

import ChildComponent from './ChildComponent';

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

子组件示例：

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

子组件向父组件传值

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

父组件示例：

function ParentComponent() {
  const handleData = (data) => {
    console.log("Received from child:", data);
  };
  return <ChildComponent onData={handleData} />;
}

子组件示例：

function ChildComponent({ onData }) {
  const sendData = () => {
    onData("Data from Child");
  };
  return <button onClick={sendData}>Send Data</button>;
}

兄弟组件间传值

通过状态提升或全局状态管理（如 Context、Redux）实现。

状态提升示例：

function ParentComponent() {
  const [sharedData, setSharedData] = useState("");

  return (
    <>
      <ChildA onData={setSharedData} />
      <ChildB data={sharedData} />
    </>
  );
}

使用 Context API

适用于跨层级组件传值。

创建 Context：

const MyContext = React.createContext();

function App() {
  const value = "Shared Value";
  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

子组件消费 Context：

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

使用 Redux 全局状态管理

适用于复杂应用的多组件共享状态。

安装 Redux：

npm install redux react-redux

定义 Store 和 Reducer：

import { createStore } from 'redux';

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'UPDATE_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

const store = createStore(reducer);

组件中连接 Redux：

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

function App() {
  return (
    <Provider store={store}>
      <ComponentA />
      <ComponentB />
    </Provider>
  );
}

function ComponentA() {
  const dispatch = useDispatch();
  const sendData = () => {
    dispatch({ type: 'UPDATE_DATA', payload: "New Data" });
  };
  return <button onClick={sendData}>Update Data</button>;
}

function ComponentB() {
  const data = useSelector((state) => state.data);
  return <div>{data}</div>;
}