Question

我正在尝试制作一个通用图标类来显示不同类型的按钮。但是，我无法让Icon类处理使用特定参数传递给它的函数。

例如，在下面的场景中，我有一个带有toggleEditMode函数的Item类。我将此函数传递给名为DisplayItem的类。在DisplayItem中，我再次使用参数true将其传递给IconButton类。我认为这是引起问题的部分。

当我点击按钮时，我收到以下错误：

未捕获错误：Icon.render（）：必须是有效的React元素（或null）回。您可能已经返回undefined，数组或其他一些无效的对象。

以下是我的文件的示例：

类别

toggleEditMode(editable){
    console.log(editable);
    this.setState({
        edit_mode: editable
    });
}

render(){
    if (!this.state.edit_mode){
        return (
            <DisplayItem toggleEditMode={this.toggleEditMode.bind(this)} />
        )
    } else {
        return <EditItem />
    }
}

Class DisplayItem

render(){
    return (
        <div><IconButton type="edit" onClick={()=>{this.props.toggleEditMode(true)}} /></div>
    )
}

Class IconButton

render(){
    if (this.props.type == "edit"){
        return <span style={edit} onClick={()=>{this.props.onClick()}}>Edit</span>
    }

}

我做错了什么，我该怎么做才能解决这个问题？

Answer 1

错误指向您的IconButton渲染。当您不希望它呈现任何内容时，显式返回null：

render(){
  if (this.props.type == "edit"){
    return <span style={edit} onClick={()=>{this.props.onClick()}}>Edit</span>
  } else {
    return null;
  }
}

将包含参数值的函数传递给子组件

1 个答案: