将布尔值传递给material-ui - list-item中预期的react-element组件道具

Question

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

我有一个material-ui list-item组件，我想让一个编辑图标只对内容所有者可用。

例如:

 var rightAction = (this.props.canEdit)?<IconButton><NavigationClose /></IconButton>:false;
   <ListItem
      //properties...
        rightIconButton={righAction}
    />

当然，如果你下到的页面内容不是主人，在他的控制台中，我们会看到这样的错误:

Failed prop type:类型为boolean的无效prop rightIconButton提供给ListItem，期望一个单独的ReactElement。

问题:

如何转让或不转让财产，取决于条件?

谢谢!

Answer 1

如果你把undefined传递给一个prop，就等于根本不传递它。

把条件句改成:

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

你也可以通过拆分来使它更容易阅读(imho):

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