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

Question

通常如果你有类似的东西：

<SomeComponent foo={bar} />

您可以使用三元组将其设为可选：

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

但是如果您开始的块包含一个组件加上一些文本（单个 space）和一个变量，例如：

<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

您可以定义一个小组件来充当包装器但不会呈现任何标记，但从技术上讲它仍然是包装器。我通过定义 Aux 组件来使用这种方法：

const Aux = (props) => (props.children);

那么你可以这样做：

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

这至少避免了生成的 html 中不必要的标记，这对于样式目的可能至关重要，例如，如果您使用 flex-box。

Answer 2

过去有两种次优的方法可以实现这一点：

使用数组，需要给 React 元素添加键：

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

但是对于 React 16.2.0+，你可以使用 improved fragments:

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

或者，更好的是，您可以使用 shorthand 语法：

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

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

How can I combine a React element and text inside a ternary?