react组件如何设置dom
设置 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 进行转发。
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} />;
}注意事项
- 避免直接修改 DOM，尽量使用 React 的状态管理（
useState）控制 UI。 - 仅在必要情况下（如聚焦输入框、测量元素尺寸等）使用
ref操作 DOM。 - 在函数组件中，
useRef是推荐的方式，而类组件可使用createRef或回调 Refs。
