React add css class without rerender

В моем проекте у меня есть таблица, каждая строка имеет свой класс, зависит от состояния. У меня также были закрепленные столбцы, поэтому, когда я делаю горизонтальную прокрутку, некоторые столбцы фиксированы.React add css class without rerender

Моя проблема заключается в том, что, когда некоторое состояние меняется (например, от none к rejected) я должен отметить эту строку в качестве rejected Classname и изменить цвет фона.

Использование setState проблематично, потому что целая строка перезагружена, поэтому мои липкие столбцы исчезли (я делаю расчеты на каждом событии scroll).

Вопрос: есть ли какое-либо другое решение для изменения реакции className без повторной передачи моей строки? (кроме jQuery)

источник

2016-09-15 Rafal Lesniak

Я уверен, что изменение состояния является правильным способом сделать это. Можете ли вы инициировать свои вычисления после повторного рендеринга, восстановив представление? Вы можете сохранять координаты, если они вам нужны в состоянии. – EugZol

Да, я нашел решение. У каждой ячейки в строке есть свой компонент. Как вы знаете, каждый элемент, создаваемый из массива, должен иметь key prop.

return (
    <tr> 
    {cells.map(cell => (<td key={_.uniqueId()}>{cell.val}</td>)) 
    </tr> 
)

Я имел обыкновение быть проходя _.uniqueId() значение lodash в - это было причиной моей проблемы. Решение заключалось в замене этого уникального идентификатора на некоторую строку uniqe, в моем случае совпадение двух идентификаторов и имени столбца.

Так окончательное решение выглядит следующим образом:

return (
    <tr> 
    {cells.map(cell => { 
     const keyId = `${row.id}${cell.id}${cell.name}` 
     return (<td key={keyId}>{cell.val}</td>}) 
    }} 
    </tr> 
)

Вот объяснение, почему он разрушает и снова перерисовки: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

источник

2016-09-16 08:53:52

Измените состояние в компоненте Row так, чтобы класс обновлялся. Затем используйте PureComponent (https://github.com/facebook/react/pull/7195) на ваших дочерних компонентах, чтобы они не перерегировали, если их собственные реквизиты не изменились. Решает ли ваша проблема?

источник

2016-09-15 11:30:55 zackify

React add css class without rerender

ответ

Смежные вопросы