当前位置：首页 > React

react 如何改变 props

2026-02-12 06:58:18React

修改 props 的方法

在 React 中，props 是只读的，不能直接修改。如果需要修改 props 的值，可以通过以下方式实现：

将 props 赋值给 state
在组件的构造函数或使用 useState 钩子将 props 的值赋给 state，之后可以修改 state 的值。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.initialValue
    };
  }
}

使用 useEffect 更新 state
当 props 变化时，使用 useEffect 钩子更新 state：

function MyComponent({ initialValue }) {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);
}

通过回调函数通知父组件
如果需要修改 props 的值，可以通过回调函数通知父组件，由父组件更新 props：

function ParentComponent() {
  const [value, setValue] = useState('initial');

  return <ChildComponent value={value} onChange={setValue} />;
}

function ChildComponent({ value, onChange }) {
  const handleChange = (newValue) => {
    onChange(newValue);
  };
}

使用 Context 或状态管理库
对于跨组件共享的状态，可以使用 React Context 或状态管理库（如 Redux）来管理，避免直接修改 props。

react 如何改变 props