reactjs – 如何有条件地添加关闭和启动JSX标记

2024年1月24日 267次阅读

我从来没有弄清楚如何有条件地关闭现有的JSX标记并启动一个新的标记而不会在Visual Studio中出现语法错误.这是怎么做到的？在下面的示例中,我想将现有表拆分为两个表.如果删除条件代码,我不会收到任何语法错误.

<table>
    <thead>
        ...
    </thead>

    {true ?
     </table> /* Close first table (Syntax error on this line because of no starting tag) */
     <table>  /* Create a new table by splitting the existing table */
    : null}

    <tbody>
        ...
    </tbody>
</table>

最佳答案 我通过创建一个renderTable(rows)方法来解决这个问题,我为每组需要在一个单独的表中调用的方法调用它：

render() {
    let tables = [];
    let tableRows = [];

    this.props.rows.forEach(row => {
        tableRows.push(row);
        if (someCondition()) {
            // end the table after this row
            tables.push(this.renderTable(tableRows));
            tableRows = [];
        }
    });

    if (tableRows.length) {
        tables.push(this.renderTable(tableRows));
    }

    return <div>{tables}</div>;
}

renderTable(rows) {
    return <table>
        <tbody>
        {rows.map ..... }
        </tbody>
    </table>
}
点赞