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文档主要提供了帮助，并且进行了大量的反复试验。希望这个问题和答案可以在将来帮助其他有此问题的人。

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

1 个答案: