Question

通常情况下，如果您有：

string connStr = "server=localhost;user=root;database=uwpconnect;port=3306;password=";
StringBuilder sb = new StringBuilder();
MySqlConnection conn = new MySqlConnection(connStr);
conn.Open();
string sql = "SELECT Name FROM world";
MySqlCommand cmd = new MySqlCommand(sql, conn);
MySqlDataReader rdr = cmd.ExecuteReader();

while (rdr.Read())
{
   sb.AppendLine(rdr[0].ToString());
}
rdr.Close();
conn.Close();

你可以使用三元组来使它成为可选项：

<SomeComponent foo={bar} />

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

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

将它括在括号中不会起作用：

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

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

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

还有其他方法告诉React：

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

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

Answer 1

过去有两种次优的方法来实现这一目标：

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

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

创建wrapper component，如@margaretkru建议。

但是使用React 16.2.0+，您可以使用improved fragments：

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

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

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

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

Answer 2

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

来使用此方法

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

然后你可以这样做：

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

如果你使用的是html，这至少可以避免在结果flex-box中出现不必要的标记，这可能对于样式目的至关重要。

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

2 个答案: