子コンポーネントにパラメータ値を含む関数を渡す

Question

さまざまな種類のボタンを表示するための汎用アイコンクラスを作成しようとしています。しかし、私は、特定のパラメータで渡された関数を処理するためにIconクラスを取得するのに問題があります。

たとえば、以下のシナリオでは、toggleEditMode関数を持つItemクラスがあります。この関数をDisplayItemというクラスに渡します。 DisplayItemでは、これをもう一度IconButtonクラスにパラメータtrueで渡します。私はこれが問題を引き起こしている部分だと思う。

私は、私は次のエラーを取得]ボタンをクリックしてください

：

クラス項目

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 /> 
    } 
} 

：ここ

Uncaught Error: Icon.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

は私のファイルがどのように見えるかのサンプルですクラスDisplayItem

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

クラスIconButton

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

} 

私が間違って何をやっていると私はこれを修正するために何ができるのでしょうか？

Answer 1

エラーは、IconButtonレンダリングを指しています。

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