將包含參數值的函數傳遞給子組件

Question

我正在嘗試製作用於顯示不同類型按鈕的通用圖標類。但是，我無法讓Icon類處理傳遞給它的函數，並使用特定的參數。

例如，在下面的場景中，我有一個帶有toggleEditMode函數的Item類。我將此函數傳遞給名爲DisplayItem的類。在DisplayItem中，我再次將它傳遞給IconButton類，其參數爲true。我認爲這是造成問題的部分。

當我按一下按鈕我收到以下錯誤：

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.

這裏是我的文件是什麼樣子的樣本：

類項目

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

類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呈現。當你不想讓它呈現任何東西時，顯式返回null：

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