react 如何修改props
在 React 中，props 是只读的，不能直接修改。但可以通过以下方法间接实现类似“修改 props”的效果：
将 props 转为 state
在子组件内部，将 props 的值复制到 state 中，之后修改 state 而非 props：
function ChildComponent({ initialValue }) {
const [value, setValue] = useState(initialValue);
const handleChange = () => {
setValue("New Value");
};
return <button onClick={handleChange}>{value}</button>;
}通过回调函数通知父组件
子组件通过调用父组件传递的回调函数，让父组件自行修改 props 的源数据：
function ParentComponent() {
const [value, setValue] = useState("Initial Value");
return <ChildComponent value={value} onChange={setValue} />;
}
function ChildComponent({ value, onChange }) {
return <button onClick={() => onChange("New Value")}>{value}</button>;
}使用状态管理工具
在全局状态管理（如 Redux、Context API）中修改状态，props 会随之更新：
const ValueContext = createContext();
function ParentComponent() {
const [value, setValue] = useState("Initial Value");
return (
<ValueContext.Provider value={{ value, setValue }}>
<ChildComponent />
</ValueContext.Provider>
);
}
function ChildComponent() {
const { value, setValue } = useContext(ValueContext);
return <button onClick={() => setValue("New Value")}>{value}</button>;
}注意事项
- 直接修改 props 会破坏 React 的单向数据流原则，可能导致不可预测的行为
- 上述方法本质是通过状态提升或全局状态管理实现数据更新，而非真正修改 props
- 对于复杂场景，推荐使用状态管理库维护应用状态
