当前位置：首页 > React

react 如何修改属性

2026-02-26 08:19:10React

修改 React 组件属性的方法

在 React 中，组件属性（props）通常是不可变的，但可以通过以下方式间接修改或动态传递属性。

通过父组件重新传递 props

父组件可以通过状态更新重新渲染子组件并传递新的 props。子组件的 props 会随着父组件状态的改变而更新。

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <ChildComponent count={count} />
  );
}

使用状态管理动态更新

react 如何修改属性

在函数组件中，结合 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 节点并修改。

react 如何修改属性

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} />;
  };
}

注意事项