Question

我正在玩material-ui来了解React。我想知道为什么我收到以下错误消息：

Invalid prop 'rightIconButton' of type 'function' supplied to 'ListItem', expected a single ReactElement.

当我使用无状态组件时，它工作得很好但是如果我需要有状态组件或者我需要访问props对象。

如何正确完成？

class ParticipantList extends Component {
  render() {

    return (
        <List>
            {this.props.participants.map(function(participant){
                return (
                    <ListItem key={participant._id} 
                    primaryText={participant.fullname()} 
                    rightIconButton={participant.needHelp ? rightIconMenu : null} 
                    />);
            })}
      </List>
    );
  }
}

class rightIconMenu extends Component {
  render(){
    return (
        <IconMenu iconButtonElement={menuIconButton}>
        <MenuItem>Action</MenuItem>
      </IconMenu>
    ); 
  }
};

const menuIconButton = ( 
      <IconButton
        touch={true}
        tooltip="more"
        tooltipPosition="bottom-left"
      >
        <ActionGrade color={pinkA200} />
      </IconButton>
);

Answer 1

对象rightIconMenu是一个类。在JavaScript领域，一个类本质上是一个JavaScript函数，有时它字面上一个JavaScript函数（也就是说，如果你正在编译ES5 / ES2015 / ES.next到ES5）。 / p>

因此，错误消息为何说'rightIconButton' of type 'function' supplied to 'ListItem'。标识符rightIconButton表示未初始化的类，如果您记得，它本质上是一个函数。根据{{1}}的定义，ListItem 必须成为React元素，而不是其他任何内容，无论是字符串，数字还是函数。

在React中，一种抑制此错误的方法是使用以下语法实际初始化所述类（在语义上表示一个组件）：

rightIconButton

此外，根据<rightIconButton /> {/* Just be sure to supply any necessary props */}组件中定义的PropType，请与库仔细检查以确认ListItem是否可选。如果它不是可选的，那么rightIconButton可能同样会引发错误。幸运的是，解决方法可能只涉及提供空null，如下所示：

span

了解ReactElement proptype

1 个答案: