我有一个条件语句来打印一个字段,如果该字段不为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不同,我在寻找内联解决方案,而不必构建具有单个值的数组。
答案 0 :(得分:4)
您的方法不起作用有两个原因:
\n
在HTML(JSX)中不存在不。+
运算符时,例如"$" + this.props.string + <br />
,操作数从左到右计算。因为操作以字符串("$"
开头,所以所有其他操作数也被视为字符串。在您的示例中,<br/>
(React.Node
/ object
)被转换为其字符串表示形式([object Object]
)并被添加到字符串中。您可以将Fragment与conditional inline rendering结合使用以使其正常工作:
<div>
{this.props.string && (
<>
{"$" + this.props.string}
<br />
</>
)}
</div>
答案 1 :(得分:0)
您可以使用一个片段来包装字符串和一个<br />
标签:
<div>
{this.props.string ? (
<>
{this.props.string}
<br />
</>
) : null}
</div>
答案 2 :(得分:0)
"You did not format the date and time settings correctly."