动态地包含文件（组件）并动态注入这些组件

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