使用useRef()更改元素样式

import React, { useRef } from 'react';

function ChangeStyleExample() {
  const myElementRef = useRef(null);

  const handleClick = () => {
    if (myElementRef.current) {
      myElementRef.current.style.color = 'blue';
      myElementRef.current.style.fontSize = '20px';
    }
  };

  return (
    <div>
      <p ref={myElementRef}>这是一个段落。</p>
      <button onClick={handleClick}>更改样式</button>
    </div>
  );
}

export default ChangeStyleExample;

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

function ChangeStyleExample() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      myElementRef.current.style.color = 'blue';
      myElementRef.current.style.fontSize = '20px';
    }
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div>
      <p ref={myElementRef}>这是一个段落。</p>
    </div>
  );
}

export default ChangeStyleExample;