react 如何改变props
修改 React 组件 props 的方法
在 React 中，props 是只读的，不能直接修改。但可以通过以下方式间接实现类似效果：
使用状态提升
将 props 转换为父组件的 state，通过回调函数让子组件触发父组件状态的更新：
// 父组件
function Parent() {
const [value, setValue] = useState('initial');
return <Child value={value} onChange={setValue} />;
}
// 子组件
function Child({ value, onChange }) {
return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}使用内部状态派生
在子组件内部使用 state 来维护 props 的派生值，适合需要临时修改但不需要同步回父组件的情况：
function Child({ initialValue }) {
const [value, setValue] = useState(initialValue);
return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}使用 ref 存储可变值
对于不需要触发重新渲染的可变值，可以使用 ref 来存储：
function Child({ initialValue }) {
const valueRef = useRef(initialValue);
const handleClick = () => {
valueRef.current = 'new value';
};
return <button onClick={handleClick}>Change Value</button>;
}使用 Context API
通过 Context 提供跨组件层级的数据共享和更新能力：
const ValueContext = createContext();
function Parent() {
const [value, setValue] = useState('initial');
return (
<ValueContext.Provider value={{ value, setValue }}>
<Child />
</ValueContext.Provider>
);
}
function Child() {
const { value, setValue } = useContext(ValueContext);
return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}注意事项
- 直接修改 props 会破坏 React 的单向数据流原则
- 选择方法时应考虑组件层级关系和状态管理需求
- 对于复杂状态管理，可考虑使用 Redux 或 Zustand 等状态管理库
