react 如何改变props
修改 React 组件的 props
在 React 中，props 是只读的，直接修改 props 会违反单向数据流原则。如果需要基于 props 生成新数据或触发状态变化，可以通过以下方法实现：
使用 state 派生 props 数据
在组件内部通过 useState 或 useMemo 将 props 转换为可操作的数据。当 props 更新时，通过 useEffect 同步更新状态：
function MyComponent({ initialValue }) {
const [value, setValue] = useState(initialValue);
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
const handleChange = (newValue) => {
setValue(newValue); // 修改的是内部状态而非直接改 props
};
return <input value={value} onChange={(e) => handleChange(e.target.value)} />;
}通过回调函数通知父组件
如果需要修改数据，应当通过父组件传递的回调函数实现：
function ParentComponent() {
const [value, setValue] = useState('default');
return (
<ChildComponent
value={value}
onChange={(newValue) => setValue(newValue)}
/>
);
}
function ChildComponent({ value, onChange }) {
return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}使用高阶组件或自定义 Hook
封装逻辑到可复用的高阶组件或 Hook 中：
function withTransformProps(WrappedComponent, transformFn) {
return function(props) {
const transformedProps = transformFn(props);
return <WrappedComponent {...transformedProps} />;
};
}
// 使用示例
const EnhancedComponent = withTransformProps(MyComponent, props => ({
...props,
value: props.initialValue.toUpperCase()
}));克隆元素并添加新 props
使用 React.cloneElement 可以为子元素添加/覆盖 props：
function Parent({ children }) {
return React.Children.map(children, child => {
return React.cloneElement(child, {
extraProp: 'newValue'
});
});
}注意：这些方法都不是直接修改 props，而是通过 React 的响应式机制实现数据流转。直接修改 props 对象在开发模式下会触发警告，且可能导致不可预测的渲染行为。
