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

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

在开发 React 应用时，你可能会遇到需要根据条件动态显示或隐藏元素的场景从父组件传递的 props。出现的一个常见问题是类属性的条件应用。

解决此问题的一种方法是使用条件渲染语法，将元素括在花括号中并提供一个逻辑表达式来确定是否渲染它。但是，在处理类属性时，需要采用不同的方法。

在提供的示例中，目标是根据 showBulkActions 属性有条件地显示按钮组。该代码尝试像这样呈现按钮组：

<div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">

但是，什么也没有发生，因为大括号包含在字符串内。要解决此问题，需要将大括号放在字符串外部：

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

这可确保在将字符串分配给 className 属性之前评估条件。此外，请确保条件表达式之前有一个空格，以避免意外的类串联。

以上是如何在 React 中有条件地应用类属性？的详细内容。更多信息请关注PHP中文网其他相关文章！