如何在 React 中有条件地应用类属性而不出现字符串插值问题？

在 React 中有条件地应用类属性

在 React 中，基于 props 动态应用类属性对于有条件地显示或隐藏元素非常有用。然而，一个常见的问题是用于条件检查的花括号可能会被误解为字符串插值。

问题：

用户正在尝试有条件地显示按钮组基于父组件的 prop。代码片段如下：

<div classname="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
<p>问题在于花括号被计算为字符串，并且没有显示任何内容。</p>
<p><strong>答案：</strong></p>
<p>问题在于字符串中大括号的位置不正确。要正确评估条件语句，应将大括号放在字符串外部：</p>
<pre class="brush:php;toolbar:false"><div classname='{"btn-group' pull-right :>
<p>这可确保首先评估条件语句，并将结果与​​类字符串连接。请注意，“pull-right”后面的空格对于避免意外组合类非常重要（例如，“pull-rightshow”而不是“pull-right show”）。此外，需要括号来确保正确的评估。</p>
<p>通过进行此调整，按钮组现在将根据父组件中 showBulkActions 属性的值按预期显示或消失。</p>
</div>