如何在React中正确实现条件类渲染？

React 中类属性的条件渲染

在 React 中，根据从父组件接收到的 props 有条件地显示或隐藏元素是常见的用例。在给定的代码片段中，作者的目标是根据 showBulkActions 属性的值隐藏或显示按钮组。

问题是用于条件渲染的大括号 { } 包含在字符串内类名属性。这会将整个字符串解释为静态值，从而导致没有实际的条件渲染。

解决方案：

要根据 prop 有条件地应用类属性，大括号必须放置在字符串外部，包含逻辑条件并确定类名称。下面的代码说明了正确的方法：

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

说明：

• className 现在用花括号括起来。
• The逻辑条件 (this.props.showBulkActions ? 'show' : 'hidden') 计算结果为如果 this.props.showBulkActions 为 true，则为“show”；如果为 false，则为“hidden”。
• “pull-right”后面的空格确保“pull-rightshow”不会无意中应用为类。
• 括号对于三元表达式的正确求值至关重要。

通过经过这些更正后，按钮组现在应该根据父组件的 showBulkActions 属性有条件地出现或消失。

以上是如何在React中正确实现条件类渲染？的详细内容。更多信息请关注PHP中文网其他相关文章！