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

Question

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

我使用三元语句根据值是正数还是负数来选择 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 的文档后，我仍然不确定如何解决它。任何帮助将非常感激。

Answer 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 文档主要提供了帮助，以及大量的尝试和错误。希望这个问题和答案可以帮助其他将来遇到这个问题的人。