react 如何改变props
在 React 中，props 是只读的，不能直接修改。如果需要基于 props 派生状态或动态调整数据，可以通过以下方法间接实现：
使用状态管理派生数据
在组件内部通过 useState 或 useEffect 将 props 转化为可管理的状态：
function MyComponent({ initialValue }) {
const [value, setValue] = useState(initialValue);
// 后续可通过 setValue 更新内部状态
}通过父组件传递回调函数
父组件可以通过传递回调函数允许子组件触发父组件的状态更新：
// 父组件
function Parent() {
const [count, setCount] = useState(0);
return <Child count={count} onUpdate={() => setCount(v => v + 1)} />;
}
// 子组件
function Child({ count, onUpdate }) {
return <button onClick={onUpdate}>Count: {count}</button>;
}使用 Context API 共享可变状态
通过 React Context 提供跨层级的动态数据：
const MyContext = createContext();
function App() {
const [sharedValue, setSharedValue] = useState('default');
return (
<MyContext.Provider value={{ sharedValue, setSharedValue }}>
<ChildComponent />
</MyContext.Provider>
);
}转换为受控组件模式
对于表单元素等场景，通过 value + onChange 模式实现双向数据流：
function InputComponent({ value, onChange }) {
return <input value={value} onChange={e => onChange(e.target.value)} />;
}核心原则：React 的数据流是单向的，props 只能由父组件更新，子组件应通过事件触发父组件的状态变更请求。
