当前位置：首页 > React

react 如何改变props

2026-02-12 01:31:14React

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

通过父组件更新

父组件可以通过状态管理控制子组件的 props。当父组件的状态变化时，子组件的 props 会自动更新。

function ParentComponent() {
  const [count, setCount] = useState(0);

  return <ChildComponent count={count} />;
}

将 props 转换为 state

子组件可以将接收的 props 复制到自己的 state 中，然后修改 state。

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

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

使用回调函数

父组件可以传递回调函数给子组件，子组件通过调用回调函数来请求父组件更新 props。

function ParentComponent() {
  const [count, setCount] = useState(0);

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

  return <ChildComponent count={count} onIncrement={incrementCount} />;
}

function ChildComponent({ count, onIncrement }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}

使用 Context API

对于深层嵌套组件，可以使用 Context 来共享和更新数据。

react 如何改变props

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>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

这些方法都遵循 React 的数据单向流动原则，保持了组件间的清晰数据流。