React JSX - 设置一个动态的 :hover color 伪类属性

Question

感谢您查看我的问题！

我有客户选择的颜色。颜色具有完整的应用上下文。到目前为止，我希望更改 backgroundColor 的每个项目都将更改为 { color }。这样做非常简单：

<div className='navbar' style={{ background: color }}>

我想执行相同的操作，但只更改悬停时的背景颜色。

关于如何使用 vanilla JS 执行它，我脑子里有点想法，所以我不确定如何在 React 应用程序中执行它。这是我想出的：

export default function RecipeList( {recipes} ) {
  const hoverColorItems = document.querySelectorAll('.hoverColor');

  hoverColorItems.forEach((item) => {
     item.addEventListener("onFocus", function() {
        item.style.backgroundColor = { color }
     })
  })

  return (
     <>
         <Link className="hoverColor">Button</Link>
     </>
  )
}

当然，我不希望 forEach 和 querySelector onFocus 起作用...我只是用它作为参考来传达我的想法，因为它对我来说更熟悉。

谢谢！

Answer 1

首先，当您使用 React 等声明性库时，您不应直接与 DOM 通信。相反，您应该声明 DOM 在特定状态下应该是什么样子。稍后您可以更改状态以实现您想要的 UI 效果。

要改变用户进出时的状态，可以使用onMouseEnter和onMouseLeave。

代码应该是这样的

function App({color}) {
  const [isFocused, setFocus] = useState(false);

  return (
    <Link
      href="https://whosebug.com"
      onMouseEnter={() => setFocus(true)}
      onMouseLeave={() => setFocus(false)}
      className="hoverColor"
      style={{
        backgroundColor: isFocused ? color : ""
      }}
    >
      Style via React
    </Link>
  );
}

你可以看到你告诉反应你想做什么（设置backgroundColor红色）对于某个状态（isFocused是true）所以操纵DOM 你应该打电话给 setFocus.

也就是说，我真的建议尽可能使用 css 解决方案。在这种情况下，您可以使用 css 通过使用变量将颜色从 React 传递到 css.

轻松实现悬停/聚焦效果

<Link
  style={{ "--background-color": color }}
  href="https://whosebug.com"
  className="link-hover"
>
  Style via Css
</Link>

.link-hover:hover {
  background-color: var(--background-color);
}

两种方式的演示：https://codesandbox.io/s/pensive-sun-m9jv2s?file=/src/App.js

（我为演示模拟了 Link 组件，你的可能看起来有点不同。）

React JSX - 设置一个动态的 :hover color 伪类属性

React JSX - Setting a dynamic :hover color pseudoclass property

javascript

css

pseudo-class

jsx

reactjs

React JSX - 设置一个动态的 :hover color 伪类 属性

React JSX - Setting a dynamic :hover color pseudoclass property

javascript

css

pseudo-class

jsx

reactjs

React JSX - 设置一个动态的 :hover color 伪类属性