如何在 React-Table 中进行条件样式（特别是条件类名）？答案

【问题标题】：How to do conditional styling (specifically a conditional className) in React-Table?如何在 React-Table 中进行条件样式（特别是条件类名）？
【发布时间】：2019-04-27 20:34:59
【问题描述】：

我正在使用 React-Table 并尝试设置列的 td 元素的 className，但 React-Table 似乎只允许 className 的字符串和变量，而不是条件样式。

我使用三元语句根据值是正数还是负数来选择类名，但 React-Table 不喜欢我的语法。

{
        Header: "24h Change",
        id: "market_cap_change_percentage_24h",
        className: {coin => coin.market_cap_change_percentage_24h > 0 ? "positive" : "negative"},
        accessor: coin =>
          coin.market_cap_change_percentage_24h == null
            ? coin.market_cap_change_percentage_24h
            : coin.market_cap_change_percentage_24h.toFixed(2) + "%"
      }

我试过了：

className: {coin.market_cap_change_percentage_24h > 0 ? "positive" : "negative"}

这个：

className: {market_cap_change_percentage_24h > 0 ? "positive" : "negative"}

即使这样：

className={market_cap_change_percentage_24h > 0 ? "positive" : "negative"}

还有许多其他变体......

它告诉我有一个语法错误并且不允许我编译。我想我做错了，在阅读了 React-Table 的文档后，我仍然不确定如何解决它。任何帮助将不胜感激。

【问题讨论】：

似乎它不喜欢花括号，因为您可以毫无问题地使用 javascript 定义访问器，尝试：market_cap_change_percentage_24h > 0 ？ “正面”：“负面”

标签： reactjs react-table

【解决方案1】：

我解决了这个问题：

{
        Header: "24h Change",
        id: "market_cap_change_percentage_24h",
        Cell: coin => (
          <span className={coin.value > 0 ? "positive" : "negative"}>
            {coin.value}%
          </span>
        ),
        accessor: coin =>
          coin.market_cap_change_percentage_24h == null
            ? coin.market_cap_change_percentage_24h
            : coin.market_cap_change_percentage_24h.toFixed(2)
      }

基本上，我使用Cell: 代替className:，然后使用.value 代替.market_cap_change_percentage_24h，最后我删除了访问器末尾的"%"，并将其放入单元格中。

React-Table 文档主要提供了帮助，以及大量的试验和错误。希望这个问题和答案可以帮助其他人在未来遇到这个问题。

【讨论】：