React 中类属性的条件渲染
在 React 中,根据从父组件接收到的 props 有条件地显示或隐藏元素是常见的用例。在给定的代码片段中,作者的目标是根据 showBulkActions 属性的值隐藏或显示按钮组。
问题是用于条件渲染的大括号 { } 包含在字符串内类名属性。这会将整个字符串解释为静态值,从而导致没有实际的条件渲染。
解决方案:
要根据 prop 有条件地应用类属性,大括号必须放置在字符串外部,包含逻辑条件并确定类名称。下面的代码说明了正确的方法:
<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
说明:
通过经过这些更正后,按钮组现在应该根据父组件的 showBulkActions 属性有条件地出现或消失。
以上是如何在React中正确实现条件类渲染?的详细内容。更多信息请关注PHP中文网其他相关文章!