如何通过引用状态更改元素的样式？答案

【问题标题】：How to change the style of a element by refs state?如何通过引用状态更改元素的样式？
【发布时间】：2021-01-09 12:14:54
【问题描述】：

我正在使用 Ant Design 制作自定义树。

我有一个带有 color 属性的 treeData，我通过将该 treeNode 的 ref 绑定到 treeNodeRef 中创建了一个 treeNode ref 数组。

<TreeNode ref={(ref) => (treeNodeRef.current[key] = ref)}>

然后迭代 treeNodeRef 以改变该 treeNode 的样式，如下所示：

  useEffect(() => {
    treeNodeRef.current.forEach((element, index) => {
      element.style.backgroundColor = treeRef.state.treeData[index].color;
      console.log(element);
    });
  }, [treeNodeRef, treeRef]);

但是我的treeNode.current总是空的，怎么回事？

我可以这样改变treeNode吗？

每个TreeNode组件都有一个checkbox，那么如何改变那个checkbox的样式呢？

这是我的代码：https://codesandbox.io/s/controlled-tree-antd4100-forked-e29pk

【问题讨论】：

您的假设是有一个element.style.backgroundColor 属性。但是TreeNode是一个自定义组件，你需要检查element有什么props，因为你不知道内部实现（或者只是检查antdgithub）
附带说明，antd 是一个设计系统，这意味着你不应该改变它的样式
我就是这么想的，大家有什么建议吗？我必须自定义它：3
您可以通过 CSS 检查样式并覆盖它来“破解”css。但问题在于“我必须自定义它”，这更像是一个设计错误，您可能应该选择更多允许样式化的模块化组件 - 在 antd 中它非常难且不可维护。
@DennisVash 你知道任何库都可以做到吗？

标签： css reactjs antd

【解决方案1】：

我通过不使用 useRef 解决了我的问题。我用 Checbox Group 包装 Tree，然后禁用 Tree 上的可检查项，使用样式复选框呈现自定义标题。

【讨论】：

【解决方案2】：

这是基于类的组件中使用的方法

<TreeNode ref={(ref) => (treeNodeRef.current[key] = ref)}>

在功能组件中，你可以这样做

import React, { useState } from "react";

const MyComponent = (props) => {
  const [selected, setSelected] = useState([]);

  useEffect(() => {
    selected.forEach((element, index) => {
      element.style.backgroundColor = treeRef.state.treeData[index].color;
      console.log(element);
    });
  }, [selected]);

  return <Tree onSelect={selected} selectedKeys={setSelected} />;
};

【讨论】：

那么，如何为所有treeNode创建一个ref数组？
对于一个 Ref 数组，检查这个 -> stackoverflow.com/a/54633947/10274125
我看过文档，在这种情况下，您不需要使用 useRef。查看答案。更新了
我不这么认为，我不需要选择的键