React中的动态模板

Question

我想创建一个简单的应该尽可能通用的Wizard组件。

我想为身体内容注入2个参数：template（包括一些逻辑）及其context。

export class ParentClass extends React.Component { 
    render() { 
     let template = `Some text: {this.context.testFunc()}`; 
     let context = new TestContext(); 

     return (
      <Wizard template={template} context={context} /> 
     ); 
    } 
} 

export class TestContext { 
    testFunc() { 
     return "another text"; 
    } 
} 

export class Wizard extends React.Component { 
    context: null; 

    constructor(props) { 
     super(props); 

     this.context = this.props.context; 
    } 

    render() { 
     return (
      <div> 
       {this.props.template} 
      </div> 
     ); 
    } 
} 

的问题是包含在template不执行（它在Wizard写入一切作为字符串）的逻辑。

我使用ES2015和Babel进行编译。

Answer 1

当您使用模板文字时，您必须使用$。

例如

`Some text: {this.context.testFunc()}`; 

应该

`Some text: ${this.context.testFunc()}`; 

而且，我认为，你在你的渲染有问题的功能

render() { 
     let template = `Some text: {this.context.testFunc()}`; 
     let context = new TestContext(); 

     return (
      <Wizard template={template} context={context} /> 
     ); 
    } 

应该

render() { 
    let context = new TestContext(); 
    let template = `Some text: ${context.testFunc()}`; 

    return (
     <Wizard template={template} context={context} /> 
    ); 
} 

希望它有帮助！