有条件地在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>。我想念什么？

上方显示为空列。

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

<td>不应以行级别为条件，而应以表级别为条件。 如果该行没有数据，就不能简单地跳过TD，因为它会通过将列移至另一行而丢弃整个行。您应该显示N / A，对于可能没有数据的行显示为空的<td></td>，或者在存在任何备注的情况下，通过this.state.hasMemos之类的东西将它们完全隐藏在表级别。

如果您使用的是我列出的新数组结构，则可以使用此函数来确定是否有任何行具有备注：

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

如果任何行都有备注，则返回true，从而为整个表隐藏<td>或为每行显示它。