大括号内的JSX

Question

我有一个条件语句来打印一个字段，如果该字段不为null，我希望在其后进行换行。该语句位于<div></div>中。似乎<br />语句中不能使用{...}（或任何其他jsx）。

我想发生的是，如果满足条件，则有条件地打印我的字符串和换行符。下面，我将显示实际情况。

<div>
    {this.props.string ? "$" + this.props.string + <br /> : null}
</div>

在这种情况下，<br />呈现为[object Object]。

我也尝试过

<div>
    {this.props.string ? "$" + this.props.string + "\n" : null}
</div>

但是“ \ n”是按字面意思印刷的。

为什么将<br />渲染为[object Object]？我需要做些什么才能达到我想要的结果？

此问题与找到的here不同，我在寻找内联解决方案，而不必构建具有单个值的数组。

Answer 1

您的方法不起作用有两个原因：

1. \n在HTML（JSX）中不存在不。
2. 使用+运算符时，例如"$" + this.props.string + <br />，操作数从左到右计算。因为操作以字符串（"$"开头，所以所有其他操作数也被视为字符串。在您的示例中，<br/>（React.Node / object）被转换为其字符串表示形式（[object Object]）并被添加到字符串中。

您可以将Fragment与conditional inline rendering结合使用以使其正常工作：

<div>
    {this.props.string && (
        <>
            {"$" + this.props.string}
            <br />
        </>
    )}
</div>

Answer 2

您可以使用一个片段来包装字符串和一个<br />标签：

<div>
    {this.props.string ? (
      <>
        {this.props.string}
        <br />
      </> 
    ) : null}
</div>

Answer 3

"You did not format the date and time settings correctly."