Условный рендеринг ячеек в реагирующей таблице

У меня есть столбец для кнопок для переключения модального режима. Проблема в том, что я не хочу отображать кнопку для каждой строки. Я хочу отображать кнопку только при первой записи цвета. Обратите внимание, что цвета непредсказуемы (вы не знаете, какие цвета будут отображаться заранее).

Например,

color toggler
black    +
red      +
red          //don't display it here
yellow   +
blue     +
blue        //don't display it here
blue        //don't display it here
orange   +
red      +
black    +
black       //don't display it here
blue     +

Я попытался просмотреть документ и какой-то пример, но не могу найти для него решения (может быть, что-то, что я пропустил?).

Что я сделал, так это сохранил первый цвет в состоянии. Затем я сделал с theCheckFunc:

let flag = true 
if (nextColor !== this.state.color)
 this.setState({color: nextColor})
 flag = false
return flag

Тогда в колонках я сделал.

Cell: props => (this.theCheckFunc(props) && <div onClick={somefunc}> + <div>)

Однако кажется, что все замерло. Браузер даже не отвечает. Любое хорошее предложение о том, как это сделать?


reactjs javascript web react-table
person utopia    schedule 15.03.2019    source источник
comment
Ячейки добавляются пользователем по одной или все они вычисляются и отображаются одновременно?   -  person Craig Gehring    schedule 15.03.2019
comment
Щас сразу и выведено   -  person utopia    schedule 18.03.2019

Ответы (2)


arrow_upward
2
arrow_downward

Не используйте при этом состояние, так как вы не хотите выполнять повторную визуализацию на основе нового ввода. Вместо этого вычисляйте массив как часть рендеринга.

Например, предположим, что когда вы переходите к оператору рендеринга, у вас есть случайный массив цветов, подобный этому:

['red', 'red', 'black', 'purple', 'purple']

Затем эта функция может создать нужный вам массив с данными для рендеринга:

function getTableRowData(arr) {
  let tableRowData = []
  arr.forEach((color, n) => {
    let toggler = true
    if (n !== 0 && arr[n - 1] === color) {
      toggler = false
    }
    tableRowData.push({ color, toggler, })
  })
  return tableRowData
}

Затем вы можете перебирать tableRowData в своем возврате рендеринга и отображать его так, как вы хотите.

person Craig Gehring    schedule 19.03.2019

arrow_upward
0
arrow_downward

Сначала установите переменные управления цветом в состоянии или в классе, где бы вы ни выбрали. В этом примере я выбираю контролировать их состояние.

constructor(props) {
        super(props);

            this.state = {
                firstRedAlreadyHere: false,
                firstBlueAlreadyHere: false,
                firstGrayAlreadyHere:false,
                ....
                ...
            }
}

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

function putValuesToTable()
{

    let table = [];

        for (let i = 0; i < (YOUR_LENGTH); i++) {
            {
                let children = [];   /* SUB CELLS */

                /* IF RED COLOR IS NEVER CAME BEFORE, PUT A BUTTON NEAR IT */
                if(!this.state.firstRedAlreadyHere)
                children.push(<td>
                   <SomeHtmlItem></SomeHtmlItem></td> <td><button </button></td>)
                /* ELSE DON'T PUT BUTTON AND CHANGE STATE. */
                else
                {
                  children.push(<SomeHtmlItem></SomeHtmlItem>);
                  this.state.firstRedAlreadyHere = true;
                }
                table.push(<tr>{children}</tr>);
            }
        }
return table;
}

Я меняю состояние напрямую вместо this.setState(); потому что я не хочу запускать обновление :). В функции рендеринга вызовите putValuesToTable следующим образом

render()
{
return (<div>
<table>
         <tbody>
         <tr>
         <th>SomeParameter</th>
         <th>SomeParameter2</th>         
         </tr>
             {this.putValuesToTable}
         </tbody>
         </table>
</div>);
}

Используйте этот пример, чтобы расширить свой код в соответствии с вашей целью.

person Yusuf Altıparmak    schedule 15.03.2019
comment
Я использую tannerlinsley/react-table. Возможно, мне следует отредактировать свой вопрос, в котором цвета непредсказуемы - случайным образом (вы не знаете, какие цвета будут отображаться). Следовательно, это может быть фиолетовый, фиолетовый, синий, синий, в котором вы заранее не знаете, что фиолетовый цвет существует. - person utopia; 15.03.2019
comment
Откройте массив. Когда сгенерирован случайный цвет, поместите его в массив по его имени, и каждый раз, когда вы снова генерируете случайный цвет, проверяйте весь массив, если он содержит где-то такой же цвет, не отображайте кнопку. - person Yusuf Altıparmak; 15.03.2019