React.js中直接赋值element.style对象不生效问题求助

为什么直接赋值element.style = { ... }不生效？ #

DOM元素的style属性是原生CSSStyleDeclaration接口的实例，并非普通JavaScript对象。直接给它赋值新对象会覆盖掉这个原生接口对象，导致浏览器无法识别样式规则。而逐个设置属性（如style.backgroundColor）是在操作原生对象的属性，因此能正常生效。

解决方案1：用Object.assign合并样式到原生style对象 #

如果坚持通过ref操作DOM，可使用Object.assign将样式对象合并到原生style上，避免替换原生接口：

import React from "react";
import { useRef, useEffect, useState } from "react";

function Project(props) {
  const [isHover, setIsHover] = useState(false);
  const wrapper = useRef(null);

  useEffect(() => {
    if (isHover) {
      wrapper.current.classList.add("effect");
      Object.assign(wrapper.current.style, {
        backgroundColor: "red",
        transform: "scale(1.05)",
        transition: "all 0.3s ease"
      });
    } else {
      wrapper.current.classList.remove("effect");
      Object.assign(wrapper.current.style, {
        backgroundColor: "transparent",
        transform: "scale(1)",
        transition: "all 0.3s ease"
      });
    }
  }, [isHover]);

  return (
    <section ref={wrapper} className="single-project-container">
      <div className="single-project-image-container">
        <img
          src={props.img}
          alt={props.imgName}
          className="project-image"
          onMouseOver={() => setIsHover(true)}
          onMouseOut={() => setIsHover(false)}
        />
      </div>
      <h1>{props.subtitle}</h1>
    </section>
  );
}

export default Project;

解决方案2：React原生内联样式（更推荐） #

React支持直接在JSX元素上绑定样式对象，无需操作DOM ref，更符合声明式编程思维，也利于组件复用：

import React from "react";
import { useState } from "react";

function Project(props) {
  const [isHover, setIsHover] = useState(false);

  const wrapperStyle = {
    backgroundColor: isHover ? "red" : "transparent",
    transform: isHover ? "scale(1.05)" : "scale(1)",
    transition: "all 0.3s ease"
  };

  return (
    <section 
      className={`single-project-container ${isHover ? "effect" : ""}`}
      style={wrapperStyle}
      onMouseOver={() => setIsHover(true)}
      onMouseOut={() => setIsHover(false)}
    >
      <div className="single-project-image-container">
        <img
          src={props.img}
          alt={props.imgName}
          className="project-image"
        />
      </div>
      <h1>{props.subtitle}</h1>
    </section>
  );
}

export default Project;

额外优化：用CSS伪类:hover（复用性最强） #

若仅需实现悬停效果，CSS的:hover伪类是最简且复用性最高的方案，无需JavaScript状态管理：

.single-project-container {
  transition: all 0.3s ease;
  background-color: transparent;
  transform: scale(1);
}

.single-project-container:hover {
  background-color: red;
  transform: scale(1.05);
}

.single-project-container.effect {
  /* 保留原effect类的自定义样式 */
}

组件代码可简化为：

import React from "react";

function Project(props) {
  return (
    <section className="single-project-container">
      <div className="single-project-image-container">
        <img
          src={props.img}
          alt={props.imgName}
          className="project-image"
        />
      </div>
      <h1>{props.subtitle}</h1>
    </section>
  );
}

export default Project;

这种方式代码简洁、性能更优，样式可通过CSS类轻松复用给其他组件，完全契合提升复用性的需求。

内容的提问来源于stack exchange，提问作者Yao Lu