Условно отрисовать <td>в компоненте React

Question

Это гистограмма JSX, которую я показываю на странице.

rows.push(
          <tr key={i}>
            <td>{this.state['Person Name'] && this.state['Person Name'][i]}</td>
            <td>{this.state['Amount'] && this.state['Amount'][i]}</td>
            {this.state['Memo'] && this.state['Memo'].length > 0 ? <td>{this.state['Memo'][i]}</td> : undefined}
            {this.state['Comment'] && this.state['Comment'].length > 0 ? <td>{this.state['Comment'][i]}</td> : undefined}
            {this.state['Incurred Date'] && this.state['Incurred Date'].length > 0 ? <td>{this.state['Incurred Date'][i]}</td> : undefined}
            {this.state['Entry Date'] && this.state['Entry Date'].length > 0 ? <td>{this.state['Entry Date'][i]}</td> : undefined}
            <td>{this.state['Billable'] && this.state['Billable'][i]}</td>
            <td>{this.state.fileName === 'expenses.csv' ? 'Expense' : 'Time'}</td>
          </tr>
        )

Каким-то образом ложные условия все еще отображают пустые <td> s таблицы.Что я пропустил?

Пустые столбцы показаны выше.

Answer 1

Вам не нужно использовать троичные операторы вообще.Просто цепочка &&.

{this.state.Memo && this.state.Memo[i] && <td>{this.state.Memo[i]}</td>}
{this.state.Comment && this.state.Comment[i] && <td>{this.state.Comment[i]}</td>}
{this.state['Incurred Date'] && this.state['Incurred Date'][i] && <td>{this.state['Incurred Date'][i]}</td>}
{this.state['Entry Date'] && this.state['Entry Date'][i] && <td>{this.state['Entry Date'][i]}</td>}

Кроме того, ваш массив выглядит неправильно отформатированным:

// 2 separate variables for the same data?
this.memo = ['a', 'b'];
this.comment = ['comment', 'comment2'];

// Why not make it an array like this?
this.rows = [
    {
        Memo: 'a',
        Comment: 'comment'
    },
    {
        Memo: 'b',
        Comment: 'comment2'
    }
];

Тогда вы можете просто сделать:

this.rows.map(row => (
      <tr key={row.id}>
        <td>{row['Person Name']}</td>
        <td>{row['Amount']}</td>
        {this.state.hasMemos && <td>{row.Memo}</td>}
        ...
      </tr>
    )}

A <td> mustn 'не должно быть условным на уровне строки, оно должно быть условным на уровне таблицы. Вы не можете просто пропустить TD, если для этой строки нет данных, так как она отбросит всю строку, сместив столбцы на .Вы должны либо отобразить N / A, пустой <td></td> для строк, которые могут не иметь данных, либо полностью скрыть их на уровне таблицы через что-то вроде this.state.hasMemos, если есть какие-либо заметки.

Если выИспользуя новую структуру массива, которую я перечислил, вы можете использовать эту функцию, чтобы определить, есть ли в какой-либо строке памятка:

this.array.some(row => row.Memo);

Это вернет true, если в какой-либо строке есть памятка, таким образом, либо скрывая <td> для всей таблицы или для каждой строки.