Как сделать условное моделирование (в частности, условное имя класса) в React-Table? - PullRequest
Новая
       11

Как сделать условное моделирование (в частности, условное имя класса) в React-Table?

0 голосов
/ 27 апреля 2019

Я использую React-Table, и я пытаюсь установить className элемента td столбца, но 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 я все еще не уверен, как ее решить. Любая помощь будет высоко ценится.

1 Ответ

1 голос
/ 28 апреля 2019

Я решил проблему: 

{
        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, а также множество проб и ошибок. Надеемся, что этот вопрос и ответ помогут другим, у кого возникнет эта проблема в будущем.

...