Динамические шаблоны в реакторе

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

Надеюсь, это поможет!