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

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

0 голосов
/ 15 марта 2019

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

Например, 

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>)

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

Ответы [ 2 ]

1 голос
/ 19 марта 2019

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

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

['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 в возвращаемом вами рендере и заставить его отображать так, как вы хотите.

0 голосов
/ 15 марта 2019

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

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>);
}

Используйте этот пример для расширения кода в соответствии с вашей целью.

...