如何在 React 中有条件地应用类属性：为什么我的按钮组可见性切换不起作用？

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

从概念上讲，有条件地渲染元素是 React 中的常见用例。然而，当考虑类属性时，问题就出现了。本文通过一个实际示例探讨如何有条件地应用类属性：

问题：

用户正在尝试根据按钮组的可见性切换按钮组的可见性从父组件传递的布尔值。但是，类属性未正确计算。

<code class="jsx"><div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}></code>

答案:

问题在于表达式周围大括号的位置。它们不应位于字符串内部，而应与括号一起位于外部，如下所示：

<code class="jsx"><div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}></code>

通过将大括号放在字符串外部，表达式将被计算为 JavaScript 代码而不是静态字符串。这允许根据 this.props.showBulkActions 的布尔值应用正确的类。

此外，在“向右拉”后添加一个空格以确保正确应用类属性。如果没有空格，就会存在创建无效类的风险，例如“pull-rightshow”而不是“pull-right show”。

以上是如何在 React 中有条件地应用类属性：为什么我的按钮组可见性切换不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！