当前位置：首页 > React

react如何组件传值

2026-03-11 01:26:37React

React 组件传值方法

父组件向子组件传值（Props）

父组件通过属性（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>;
}

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

父组件通过回调函数接收子组件的数据。子组件调用父组件传递的函数并传入数据。

父组件代码示例：

import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleData = (data) => {
    console.log(data);
  };
  return <ChildComponent onData={handleData} />;
}

子组件代码示例：

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

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

将共享状态提升到最近的共同父组件中，通过 props 传递给兄弟组件。

父组件代码示例：

import SiblingA from './SiblingA';
import SiblingB from './SiblingB';

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

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

兄弟组件 A 代码示例：

function SiblingA(props) {
  const updateData = () => {
    props.setSharedData("Updated Data");
  };
  return <button onClick={updateData}>Update Data</button>;
}

兄弟组件 B 代码示例：

function SiblingB(props) {
  return <div>{props.sharedData}</div>;
}

跨层级组件传值（Context API）

使用 React.createContext 创建上下文，通过 Provider 提供数据，子组件通过 useContext 或 Consumer 获取数据。

创建 Context：

import { createContext } from 'react';

const MyContext = createContext();
export default MyContext;

父组件代码示例：

import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

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

子组件代码示例：

import { useContext } from 'react';
import MyContext from './MyContext';

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

全局状态管理（Redux）

使用 Redux 进行全局状态管理，组件通过 useSelector 获取状态，通过 useDispatch 更新状态。

安装 Redux：

npm install redux react-redux

创建 Store：

import { createStore } from 'redux';

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

const store = createStore(reducer);
export default store;

父组件代码示例：

import { Provider } from 'react-redux';
import store from './store';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <Provider store={store}>
      <ChildComponent />
    </Provider>
  );
}

子组件代码示例：

react如何组件传值

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

function ChildComponent() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  const updateData = () => {
    dispatch({ type: 'UPDATE_DATA', payload: "New Data" });
  };

  return (
    <>
      <div>{data}</div>
      <button onClick={updateData}>Update Data</button>
    </>
  );
}