react 如何修改props
在 React 中，props 是只读的，直接修改它们会违反 React 的设计原则。如果需要修改从父组件传递的数据，可以通过以下方法实现：
使用状态提升（Lifting State Up）
将需要修改的数据提升到父组件，通过回调函数让子组件通知父组件更新数据。父组件管理状态，子组件通过 props 接收数据和回调函数。
父组件示例：
function ParentComponent() {
const [value, setValue] = useState("initial value");
const handleValueChange = (newValue) => {
setValue(newValue);
};
return <ChildComponent value={value} onChange={handleValueChange} />;
}子组件示例：
function ChildComponent({ value, onChange }) {
const handleClick = () => {
onChange("new value");
};
return (
<div>
<p>{value}</p>
<button onClick={handleClick}>Change Value</button>
</div>
);
}使用内部状态（Local State）
如果 props 仅用于初始化子组件的内部状态，可以使用 useState 或 useEffect 来管理子组件的本地状态。
function ChildComponent({ initialValue }) {
const [value, setValue] = useState(initialValue);
const handleClick = () => {
setValue("new value");
};
return (
<div>
<p>{value}</p>
<button onClick={handleClick}>Change Value</button>
</div>
);
}使用 Context API
对于深层嵌套组件，可以通过 Context 共享数据，并结合 useState 或 useReducer 管理状态。
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);
const handleClick = () => {
setValue("new value");
};
return (
<div>
<p>{value}</p>
<button onClick={handleClick}>Change Value</button>
</div>
);
}使用状态管理库
在大型应用中，可以使用 Redux、MobX 或 Zustand 等状态管理库集中管理数据，避免直接修改 props。
通过以上方法，可以间接实现类似“修改 props”的效果，同时遵循 React 的数据流原则。
