Как условно добавить закрывающие и стартовые теги JSX

Question

Я никогда не мог понять, как условно закрыть существующий тег 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> 

Answer 1

Я решил эту проблему, создав 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> 
} 

Answer 2

Вы должны не закрыть HTML тег внутри фигурных скобок {}, если она не будет создана в фигурных скобках.

Примеры:

<div> 
{</div>} //wrong 

<div> 
    {1 + 5} 
</div> //correct 

<div> 
    {2+3 === 5 ? <div>hello</div> : <div>world</div>} 
</div> //correct 

<div> 
    {2+3 === 5 ? <div>{6 + 7}</div> : <div>{5 + 5}</div>} 
</div> //correct 

Добавление к этому, {} может содержать только один узел HTML тега. Если у вас есть несколько узлов HTML внутри {}, React выдает ошибку.

Примеров

<div> 
{ 
    <span>{1+2}</span> 
    <span>{1+2}</span> 
} 
</div> //will throw an error 

<div> 
{ 
    <span> 
    <span>{1+2}</span> 
    <span>{1+2}</span> 
    </span> 
} 
</div> //correct 

Надеются, что это поможет !!

[Update]

В вашем случае

{ 
true //if true, this table will be rendered, else, null will be returned 
    ? <table> 
    <thead> 
    ... 
    </thead> 
</table> 
: null 
} 
<table> //this table will render all the time 
<tbody> 
    ... 
</tbody> 
</table> 

Answer 3

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

if (condition === true) { 
    return (<table>...</table> <table>...</table>); 
} else { 
    return (<table>...</table>); 
}