リアクションのダイナミックテンプレート

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

問題は、（それがWizardに文字列として、すべてを書き込み）を実行していないtemplateに含まロジックです。

コンパイルには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} /> 
    ); 
} 

である必要があり、あなたのレンダリング機能に問題を抱えていることを考えます3210

希望すると助かります！