当前位置：首页 > React

react如何更新props数据

2026-01-24 15:11:47React

理解 React 中 Props 的不可变性

React 中的 props 是只读的，子组件不能直接修改从父组件传递过来的 props。props 的数据流是单向的，只能从父组件流向子组件。如果需要更新 props 数据，必须通过父组件重新传递新的 props 值。

通过父组件更新 Props

父组件可以通过修改自身的 state 或 props，然后将新的数据作为 props 传递给子组件。子组件接收到新的 props 后会触发重新渲染。

react如何更新props数据

// 父组件
function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ChildComponent count={count} />
    </div>
  );
}

// 子组件
function ChildComponent({ count }) {
  return <div>Count: {count}</div>;
}

使用回调函数更新 Props

父组件可以传递一个回调函数给子组件，子组件通过调用该回调函数通知父组件更新状态，从而间接更新 props。

react如何更新props数据

// 父组件
function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent count={count} onIncrement={handleIncrement} />
    </div>
  );
}

// 子组件
function ChildComponent({ count, onIncrement }) {
  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}

使用 Context API 共享状态

对于深层嵌套的组件，可以通过 Context API 共享状态，避免逐层传递 props。父组件提供 Context，子组件消费 Context 中的数据。

const CountContext = createContext();

// 父组件
function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </CountContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

使用状态管理库

对于大型应用，可以使用状态管理库（如 Redux、MobX）来管理全局状态。组件通过订阅状态变化获取最新的 props。

// 使用 Redux 示例
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './actions';

// 子组件
function ChildComponent() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
}