如何多次更改样式？答案

【问题标题】：How to change style multiple times?如何多次更改样式？
【发布时间】：2021-04-29 14:49:28
【问题描述】：

我有一个图表，我想在文本周围显示一个边框。我的代码有效，但只有 1 次用于添加或删除边框，但我的事件 MouseEnter/MouseLeave 可以多次工作。这是为什么呢？

const Custom_border = (index) =>
{
        data_utilisation.map((data_utilisation, index_1) => 
        {
            if(index == index_1)
            {
                console.log("In")
                const add_border = document.getElementById(index)
                return add_border.classList.add('nice_border')
                
            }
        })
    return null
}

return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>

所有条形图（Recharts API）：

<BarChart
         width={400}
         height={250}
         data={data_utilisation}>

<CartesianGrid opacity={0.1} vertical={false} horizontal={false}/>
<XAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
<YAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
                    
<Bar dataKey="uv" fill="#8884d8">
{
  data_utilisation.map((data_utilisation, index) => 
                                        
  {
     if(data_utilisation.uv <= 5000)
     {
       return <Cell className="my_cell" cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
     }
    else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
    {
      return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[1]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
     }
     else
     {
       return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[2]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
      }
      })
      }
</Bar>
</BarChart>

在我需要放置边框的条形图旁边显示文本的代码：

<div className="Text_1">
{
   data_utilisation.map((data_utilisation, index) => 
   {
   if(data_utilisation.uv <= 5000)
   {
      return <p id={index} style={{ color: colored[0]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
   }
     else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
     {
       return <p id={index} style={{ color: colored[1]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
     }
else
{
 return <p id={index} style={{ color: colored[2]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}})}
</div>

【问题讨论】：

Cell 来自哪里？它是您创建的组件吗？通常不建议修改由 react 管理的 DOM 元素，因为 react 不会意识到对元素所做的更改，并且可能会在连续渲染期间覆盖它。
Cell是recharts api的一个元素，recharts.org/en-US
在不修改 DOM 的情况下，我可以使用什么来代替更改元素？
react 的全部意义在于您不修改 DOM。 React 会为你做到这一点。您应该使用组件状态和道具来改变正在呈现的内容。

标签： css reactjs react-native

【解决方案1】：

如果我正确理解了您的用例，您希望在用户将鼠标悬停在单元格上时显示边框。您可以使用 css 实现这一点，您只需要弄清楚如何选择 Cell 组件。假设它有一个名为 my-cell 的类名，您可以简单地添加以下 css。

.my-cell:hover {
  border: 1px solid black;
}

要弄清楚组件的类名是什么，你可以在 dom 上检查它，如果没有，你可以像这样添加它：

return <Cell className="my-cell" ... />

【讨论】：

嗨，比这更难，我用 Recharts Api 显示一个条形图。当我的鼠标进入条形图时，我需要在条形图旁边的文本周围显示边框。一个小时后，我设法展示了我想要的东西，但这只能工作一次。
如果你想检查的话，我把所有的代码都放了。