react 如何修改 属性
修改 React 组件属性的方法
直接通过 props 传递新值
父组件可以通过更新传递给子组件的 props 值来修改属性。子组件会自动重新渲染以反映新的属性值。
// 父组件
function Parent() {
const [text, setText] = useState("初始文本");
return (
<ChildComponent text={text} />
<button onClick={() => setText("新文本")}>更新属性</button>
);
}
// 子组件
function ChildComponent(props) {
return <div>{props.text}</div>;
}使用 useEffect 监听属性变化
当属性变化需要触发副作用时，可以在子组件中使用 useEffect 监听特定属性的变化。
function ChildComponent({ value }) {
useEffect(() => {
console.log("value 属性已更新:", value);
// 执行副作用逻辑
}, [value]); // 依赖数组中指定要监听的属性
return <div>{value}</div>;
}通过 ref 修改 DOM 元素属性
对于需要直接操作 DOM 元素的情况，可以使用 useRef 钩子获取元素引用并修改其属性。
function MyComponent() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.disabled = true; // 直接修改 DOM 属性
};
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>禁用输入框</button>
</>
);
}动态计算派生属性
根据其他属性或状态动态计算属性值，这种方式不需要直接修改原始属性。
function UserProfile({ firstName, lastName }) {
const fullName = `${firstName} ${lastName}`; // 派生属性
return <h1>{fullName}</h1>;
}注意事项
- React 遵循单向数据流原则，子组件不应直接修改接收到的 props
- 需要修改父组件传递的属性时，应该通过回调函数通知父组件更新状态
- 对于非受控组件，可以使用 defaultValue 或 defaultChecked 设置初始值，后续通过 ref 控制
