リアクションテンプレートのバインディング機能

Question

単純なWizardコンポーネントを作成したいと思います。私はどのようにonChange入力イベントのためのhandleChange関数をバインドする方法と渡されたコンテキスト（どこかで定義され、ParentClassにインスタンス化された私のカスタムクラスです）に取得する方法がわかりません。私はコンパイルするためES2015とBabelを使用

export class ParentClass extends React.Component { 
    render() { 
     let template = `<input value=${context.testVal} onChange=${context.handleChange.bind(context, event)}>`; // how to invoke this code inside Wizard using TestContext class??? 
     let testContext = new TestContext(); 

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

export class TestContext { 
    testVal = null; 

    constructor() { 
     this.testVal = 10; 
    } 

    handleChange(e) { 
     console.log(e); 
    } 
} 

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

    constructor(props) { 
     super(props); 

     this.context = this.props.context; 
    } 

    render() { 
     return (
      <div dangerouslySetInnerHTML={{__html: this.props.template}}> 
      </div> 
     ); 
    } 
} 

：

Uncaught SyntaxError: Unexpected token }

ここに私のWizardコンポーネントと私はそれをテストするために作成した単純なテンプレートです。

[編集]

私は私のコードとの質問に編集しました。私は今、あなたが "$を取り除く"と言っているものを見ます。

私は私を理解できませんでした。 HTMLいくつかの変数バインディング（文字列として）+宣言されたテンプレートのすべてのロジックを含むべきいくつかのコンテキストクラスを宣言したいと思います。私はそれらを持っているとき、私はそれらをWizardにparamsとして渡し、このWizard（JSXを同時に実行する）のHTMLを置き換えるためにテンプレートを使用したいと思います。言い換えると。 Wizardコンポーネントに動的テンプレート用の汎用メカニズムが必要です。

Answer 1

と JSXの方がずっと良いでしょう。ここではそれを行う方法の一例です：あなたはあなたが実際にこのようなために尋ねよう何かを行うことができ

function Template (props) { 
    // Though there's no `event` variable that should be getting bound here and 
    // you'd be better off binding `handleChange` to the instance in 
    // TestContext's constructor. 
    return <input 
    value={props.context.testVal} 
    onChange={props.context.handleChange.bind(props.context, event)} 
    />; 
} 

export class ParentClass extends React.Component { 
    render() { 
     let testContext = new TestContext(); 

     // You could instead create the element here using Template and pass 
     // that in. You could even pass it as a child of <Wizard> and just 
     // have Wizard render its children. 
     return (
      <Wizard template={Template} context={testContext} /> 
     ); 
    } 
} 

// ... 

export class Wizard extends React.Component { 
    // ... 
    render() { 
     return (
      <div> 
       <this.props.template context={this.props.context} /> 
      </div> 
     ); 
    } 
} 

は、あなたが期待するように動作するようにつもりはない - あなたがレンダリングすることはできません関数オブジェクトをHTMLの文字列に変換します（私はonChange部分を削除しました）。

export class ParentClass extends React.Component { 
    render() { 
     let template = (context) => `<input value=${context.testVal} />`; 
     let testContext = new TestContext(); 

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

// ... 

export class Wizard extends React.Component { 
    // ... 
    render() { 
     return (
      <div dangerouslySetInnerHTML={{__html: this.props.template(this.context)}} /> 
     ); 
    } 
} 

しかし、本当にあなたはおそらくあなただけのJSXと協力してより良い何をしたい達成することができます。