如何在三元组合中组合React元素和文本？

Question

通常,如果你有类似的东西:

<SomeComponent foo={bar} />

您可以使用三元组使其成为可选项:

{bar ? <SomeComponent foo={bar} /> : null}

但是,如果您开始使用的块包含一个组件加上一些文本(单个空格)和一个变量,例如:

<SomeComponent foo={bar} /> {foobar}

将它括在括号中是行不通的:

{bar ? (<SomeComponent foo={bar} /> {foobar}) : null}

事实上,我发现使其工作的唯一方法是将所有内容包装在另一个元素中:

{bar ? <span><SomeComponent foo={bar} /> {foobar}</span> : null}

有没有其他方法告诉React:

<SomeComponent foo={bar} /> {foobar}

是一个离散的块,所以我可以在三元组中使用它(在JS内部,而不是JSX,逻辑)...而不添加无意义的包装元素？

Answer 1

曾经有两种次优的方法来实现这一目标:

1. 使用数组,需要向React元素添加键:

   {bar ? [<SomeComponent key="1" foo={bar} />, " ", foobar] : null}
   

2. 创建一个包装器组件,如@margaretkru建议的那样.

但是使用React 16.2.0+,您可以使用改进的片段:

{bar ? <React.Fragment><SomeComponent foo={bar} /> {foobar}</React.Fragment> : null}

或者,更好的是,您可以使用简写语法:

{bar ? <><SomeComponent foo={bar} /> {foobar}</> : null}

片段不会产生额外的容器元素.