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

Question

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

我使用三元语句来选择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，最后我删除了我在访问器末尾的"%"并将其放入Cell中。

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