将布尔值传递给 material-ui 列表项中预期的反应元素组件道具

Question

我是 React 的新手，可能我的问题听起来很愚蠢...

我有一个 material-ui 列表项组件，我想使编辑图标仅对内容所有者可用。

例如：

 var rightAction = (this.props.canEdit)?<IconButton><NavigationClose /></IconButton>:false;

   <ListItem
      //properties...
        rightIconButton={righAction}
    />

当然，如果你往下看页面内容不是所有者，在他的控制台，我们会看到这个错误：

Failed prop type: Invalid prop rightIconButton of type boolean supplied to ListItem, expected a single ReactElement.

问题：

如何根据条件转还是不转属性？

谢谢！

Answer 1

如果给一个prop传递undefined，相当于根本不传递。

所以只需将条件更改为：

var rightAction = this.props.canEdit ? <IconButton><NavigationClose /></IconButton> : undefined;

您还可以通过分解它来使其更易于阅读（恕我直言）：

var button = (<IconButton><NavigationClose /></IconButton>);
var rightAction = this.props.canEdit ? button : undefined;

将布尔值传递给 material-ui 列表项中预期的反应元素组件道具

Pass boolean to expected react-element component props in material-ui list-item

reactjs

material-ui