動態地包含文件（組件）並動態注入這些組件

Question

環顧下一個我找不到答案：我如何動態地包含一個文件，基於每個說道具的改變：這裏有一些sudo代碼，試圖做！

class Test extends React.Component { 

    constructor(props){ 
     super(props) 
     this.state = { componentIncluded: false } 

    includeFile() { 
     require(this.props.componetFileDir) // e.g. ./file/dir/comp.js 
     this.setState({ componentIncluded: true }); 

    } 

    render() { 
     return(
      <div className="card"> 
       <button onClick={this.includeFile}> Load File </button> 
       { this.state.componentIncluded && 
        <this.state.customComponent /> 
       } 
      </div> 
     ) 
    } 
} 

所以this.props.componetFileDir訪問的文件目錄，但我需要動態包括它，並不能真正確實需要（）作爲它似乎動作onClick被調用之前運行。任何幫助都會很棒。

Answer 1

Em，你的代碼看起來有點不對。所以我爲動態注入組件創建了一個單獨的演示。

在不同情況下，您可以使用不同的React生命週期函數來注入組件。像componentWillReceiveProps或componentWillUpdate一樣。

componentDidMount() { 
    // dynamically inject a Button component. 
    System.import('../../../components/Button') 
     .then((component) => { 
     // update the state to render the component. 
     this.setState({ 
      component: component.default, 
     }); 
     }); 
    } 

    render() { 
    let Button = null; 
    if (this.state.component !== null) { 
     Button = this.state.component; 
    } 
    return (
     <div> 
     { this.state.component !== null ? <Button>OK</Button> : false } 
     </div> 
    ); 
    } 

後您編輯您的代碼，它應該是類似下面：

class Test extends React.Component { 

    constructor(props){ 
     super(props) 
     this.state = { customComponent: null } 
     this.includeFile = this.includeFile.bind(this); 
    } 

    includeFile() { 
     System.import(this.props.componetFileDir) 
     .then((component) => { 
      this.setState({ customComponent: component.default }); 
     }); 
    } 

    render() { 
     return(
      <div className="card"> 
       <button onClick={this.includeFile}> Load File </button> 
       { 
        this.state.customComponent 
       } 
      </div> 
     ) 
    } 
}