当前位置：首页 > React

react如何传数据

2026-03-31 00:20:18React

传递 Props

在 React 中，父组件可以通过 props 向子组件传递数据。子组件通过参数接收 props 对象，并直接使用其中的数据。

父组件传递数据：

<ChildComponent name="John" age={25} />

子组件接收数据：

function ChildComponent(props) {
  return <div>{props.name} is {props.age} years old.</div>;
}

使用 Context API

对于跨层级组件的数据传递，可以使用 Context API 避免逐层传递 props。创建一个 Context 并包裹需要共享数据的组件。

创建 Context：

const UserContext = React.createContext();

提供数据：

<UserContext.Provider value={{ name: "Alice", age: 30 }}>
  <ChildComponent />
</UserContext.Provider>

消费数据：

function ChildComponent() {
  const user = React.useContext(UserContext);
  return <div>{user.name} is {user.age} years old.</div>;
}

状态提升

当多个子组件需要共享同一数据时，可以将状态提升到最近的共同父组件中，并通过 props 传递数据和更新函数。

父组件管理状态：

function ParentComponent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildA count={count} />
      <ChildB setCount={setCount} />
    </>
  );
}

子组件使用或更新状态：

function ChildA({ count }) {
  return <div>Count: {count}</div>;
}

function ChildB({ setCount }) {
  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

使用回调函数

父组件可以通过传递回调函数给子组件，使子组件能够将数据传递回父组件。

父组件定义回调：

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

子组件调用回调：

function ChildComponent({ onData }) {
  return <button onClick={() => onData("Hello")}>Send Data</button>;
}

使用 Refs

对于需要直接访问子组件实例或 DOM 元素的情况，可以使用 ref 传递数据或方法。

父组件创建 Ref：

function ParentComponent() {
  const childRef = React.useRef();
  const handleClick = () => {
    childRef.current.doSomething();
  };
  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Trigger Child</button>
    </>
  );
}

子组件暴露方法：

const ChildComponent = React.forwardRef((props, ref) => {
  React.useImperativeHandle(ref, () => ({
    doSomething: () => console.log("Child method called")
  }));
  return <div>Child Component</div>;
});

使用第三方状态管理库

对于复杂应用，可以使用 Redux、MobX 或 Zustand 等状态管理库全局共享数据。以 Redux 为例：

创建 Store：

const store = configureStore({
  reducer: {
    user: userReducer
  }
});

组件中访问数据：

function UserProfile() {
  const user = useSelector(state => state.user);
  return <div>{user.name}</div>;
}

组件中更新数据：

react如何传数据

function UpdateUser() {
  const dispatch = useDispatch();
  const updateName = () => dispatch({ type: 'UPDATE_NAME', payload: 'Bob' });
  return <button onClick={updateName}>Update Name</button>;
}