react 如何修改 属性
修改 React 组件属性的方法
在 React 中，组件属性（props）通常是不可变的，但可以通过以下方式间接修改或动态传递属性。
通过父组件重新传递 props
父组件可以通过状态更新重新渲染子组件并传递新的 props。子组件的 props 会随着父组件状态的改变而更新。
function ParentComponent() {
const [count, setCount] = useState(0);
return (
<ChildComponent count={count} />
);
}使用状态管理动态更新
在函数组件中，结合 useState 钩子动态管理属性值，通过事件触发状态更新。
function MyComponent() {
const [text, setText] = useState('Initial Text');
const handleClick = () => {
setText('Updated Text');
};
return <div onClick={handleClick}>{text}</div>;
}通过 ref 修改 DOM 属性
对于直接操作 DOM 元素的属性（如 className、style），可以通过 useRef 钩子访问 DOM 节点并修改。
function MyComponent() {
const divRef = useRef(null);
useEffect(() => {
if (divRef.current) {
divRef.current.style.color = 'red';
}
}, []);
return <div ref={divRef}>Hello</div>;
}使用高阶组件（HOC）包装属性
通过高阶组件向子组件注入新的 props 或覆盖原有 props。
function withExtraProps(WrappedComponent) {
return function EnhancedComponent(props) {
const newProps = { ...props, extraProp: 'value' };
return <WrappedComponent {...newProps} />;
};
}注意事项
- 直接修改 props 对象是反模式，可能导致不可预测的行为。
- 动态属性应通过父组件状态或上下文（Context）管理。
- 对于表单元素，使用受控组件模式绑定状态到
value属性。
