react 如何修改props
在 React 中，props 是只读的，不能直接修改。但可以通过以下方法间接实现类似效果：
使用状态提升
将需要修改的数据提升到父组件中管理，通过回调函数让子组件触发父组件的状态更新。父组件更新后，新的 props 会传递给子组件。
function Parent() {
const [count, setCount] = useState(0);
const handleIncrement = () => setCount(count + 1);
return <Child count={count} onIncrement={handleIncrement} />;
}
function Child({ count, onIncrement }) {
return <button onClick={onIncrement}>Count: {count}</button>;
}使用状态派生
在子组件内部使用 useState 或 useReducer 初始化派生状态，通过 useEffect 监听 props 变化来更新状态。
function Child({ initialCount }) {
const [count, setCount] = useState(initialCount);
useEffect(() => {
setCount(initialCount);
}, [initialCount]);
return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}使用 ref 保存可变值
对于需要在渲染周期外保持可变的值，可以使用 useRef 配合 useEffect 实现。
function Child({ externalValue }) {
const mutableRef = useRef(externalValue);
useEffect(() => {
mutableRef.current = externalValue;
}, [externalValue]);
// 通过mutableRef.current访问最新值
}设计模式变更
考虑使用组合模式（Component Composition）替代直接修改 props，通过 children prop 或 render props 实现更灵活的组件交互。
function Toggle({ children }) {
const [on, setOn] = useState(false);
return children({ on, toggle: () => setOn(!on) });
}
// 使用
<Toggle>
{({ on, toggle }) => <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>}
</Toggle>注意：直接修改 props 违反 React 的单向数据流原则，可能导致不可预测的行为。上述方法都遵循了 React 的设计模式，通过明确的数据流和状态管理实现需求。
