react 如何改变 props
修改 React 组件 props 的方法
在 React 中，props 是只读的，直接修改 props 会违反单向数据流原则。但可以通过以下方法间接实现类似效果：
父组件传递新的 props
父组件可以通过更新 state 重新传递 props 给子组件。这是 React 推荐的方式：
function ParentComponent() {
const [count, setCount] = useState(0);
return <ChildComponent count={count} onUpdate={() => setCount(count + 1)} />;
}
function ChildComponent({ count, onUpdate }) {
return (
<div>
<p>Count: {count}</p>
<button onClick={onUpdate}>Increment</button>
</div>
);
}使用状态提升
将需要修改的数据提升到公共父组件中管理：
function SharedParent() {
const [sharedValue, setSharedValue] = useState('initial');
return (
<>
<ComponentA value={sharedValue} onChange={setSharedValue} />
<ComponentB value={sharedValue} />
</>
);
}使用 Context API
对于深层嵌套组件，可以使用 Context 共享可修改的状态：
const MyContext = createContext();
function App() {
const [value, setValue] = useState('default');
return (
<MyContext.Provider value={{ value, setValue }}>
<ChildComponent />
</MyContext.Provider>
);
}
function ChildComponent() {
const { value, setValue } = useContext(MyContext);
return <button onClick={() => setValue('new')}>{value}</button>;
}克隆元素并添加新 props
使用 React.cloneElement 可以给子组件添加/覆盖 props：
function Parent({ children }) {
return React.cloneElement(children, { newProp: 'value' });
}注意事项
- 直接修改 props 对象会导致不可预测的行为
- 状态管理应遵循单向数据流原则
- 对于复杂状态管理，考虑使用 Redux 或 MobX 等状态管理库
