Javascript 花括号内的JSX

我有一个条件语句来打印一个字段，如果它不是空的，我希望后面有一个换行符。此语句存在于

中。似乎

（或任何其他jsx）不能在

{…}

语句中使用

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

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

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

为什么将

呈现为

[object object]

？我需要做什么才能达到我想要的结果

---

这个问题与我所发现的问题不同，我正在寻找一个内联解决方案，而不是用一个值构建一个数组。

您可以使用一个片段来包装字符串和一个

标记：

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

{this.props.string(
{this.props.string}


)：null}

{
道具
？测试

：null
}

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

\n

不存在于HTML（JSX）中

当您使用

+

运算符时，例如

“$”+this.props.string+

，操作数将从左到右求值。因为操作以字符串（

“$”

）开始，所以所有其他操作数也被视为字符串。在您的示例中，

（一个

反应节点

/

对象

）被转换为其字符串表示形式（

[object object]

）并添加到字符串中

您可以将与结合使用使其工作：

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

{this.props.string&&(
{“$”+this.props.string}


)}

<div>
 {
   props.string
   ? <React.Fragment>test<br/></React.Fragment>
   : null
 }
</div>

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