当前位置：首页 > React

react组件如何设置dom

2026-01-24 20:32:34React

设置 DOM 的方法

在 React 中，直接操作 DOM 通常通过 ref 实现，以下是几种常见方式：

使用 `useRef` Hook

useRef 可以创建一个可变的引用对象，并将其绑定到 DOM 元素上。

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const divRef = useRef(null);

  useEffect(() => {
    if (divRef.current) {
      divRef.current.style.color = 'red';
    }
  }, []);

  return <div ref={divRef}>This is a DOM element</div>;
}

使用 `createRef`（类组件）

在类组件中，可以使用 createRef 来创建引用。

import React, { Component, createRef } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.divRef = createRef();
  }

  componentDidMount() {
    if (this.divRef.current) {
      this.divRef.current.style.backgroundColor = 'blue';
    }
  }

  render() {
    return <div ref={this.divRef}>This is a DOM element</div>;
  }
}

回调 Refs

React 支持回调形式的 ref，可以在组件挂载时获取 DOM 节点。

import React, { useEffect } from 'react';

function MyComponent() {
  let divRef = null;

  useEffect(() => {
    if (divRef) {
      divRef.style.fontWeight = 'bold';
    }
  }, []);

  return <div ref={(el) => (divRef = el)}>This is a DOM element</div>;
}

动态修改 DOM

通过 ref 结合 useEffect 或生命周期方法，可以动态修改 DOM 属性。

import React, { useRef, useEffect } from 'react';

function DynamicDOM() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} type="text" />;
}

使用 `forwardRef` 传递 Ref

如果需要在子组件中访问 DOM，可以使用 forwardRef 进行转发。

react组件如何设置dom

import React, { forwardRef, useRef, useEffect } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  return <div ref={ref}>Child DOM</div>;
});

function ParentComponent() {
  const childRef = useRef(null);

  useEffect(() => {
    if (childRef.current) {
      childRef.current.style.border = '1px solid black';
    }
  }, []);

  return <ChildComponent ref={childRef} />;
}