Dynamische Vorlagen in React

Question

Ich möchte eine einfache Wizard Komponente erstellen, die so allgemein wie möglich sein sollte.

Ich möchte 2 Params für Body Inhalt injizieren: template (mit ein wenig Logik enthalten) und 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> 
     ); 
    } 
} 

Das Problem ist die Logik in template enthalten wird nicht ausgeführt (es alles als String in Wizard schreibt).

Ich verwende ES2015 und Babel zum Kompilieren.

Answer 1

Wenn Sie Vorlagenliterale verwenden, müssen Sie $ verwenden.

Zum Beispiel

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

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

auch sein sollte, denke ich, dass Sie ein Problem in Ihrer Render-Funktion

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

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

sollte

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

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

Hoffe es hilft!