当前位置：首页 > React

react 如何修改props

2026-02-26 07:51:35React

在 React 中，props 是只读的，不能直接修改。但可以通过以下方法间接实现类似效果：

使用状态提升

将需要修改的数据提升到父组件中管理，通过回调函数让子组件触发父组件的状态更新。父组件更新后，新的 props 会传递给子组件。

react 如何修改props

function Parent() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => setCount(count + 1);

  return <Child count={count} onIncrement={handleIncrement} />;
}

function Child({ count, onIncrement }) {
  return <button onClick={onIncrement}>Count: {count}</button>;
}

使用状态派生

在子组件内部使用 useState 或 useReducer 初始化派生状态，通过 useEffect 监听 props 变化来更新状态。

react 如何修改props

function Child({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    setCount(initialCount);
  }, [initialCount]);

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

使用 ref 保存可变值

对于需要在渲染周期外保持可变的值，可以使用 useRef 配合 useEffect 实现。

function Child({ externalValue }) {
  const mutableRef = useRef(externalValue);

  useEffect(() => {
    mutableRef.current = externalValue;
  }, [externalValue]);

  // 通过mutableRef.current访问最新值
}

设计模式变更

考虑使用组合模式（Component Composition）替代直接修改 props，通过 children prop 或 render props 实现更灵活的组件交互。

function Toggle({ children }) {
  const [on, setOn] = useState(false);
  return children({ on, toggle: () => setOn(!on) });
}

// 使用
<Toggle>
  {({ on, toggle }) => <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>}
</Toggle>

注意：直接修改 props 违反 React 的单向数据流原则，可能导致不可预测的行为。上述方法都遵循了 React 的设计模式，通过明确的数据流和状态管理实现需求。