Функции связывания в шаблонах React

Question

Я хочу создать простой компонент Wizard. Я не знаю, как связать handleChange функцию для onChange входное событие и как попасть в переданный контекст (это мой пользовательский класс, определенный где-то и установленный в ParentClass).

Uncaught SyntaxError: Unexpected token }

Вот мой Wizard компонент и простой шаблон, который я создал, чтобы проверить:

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

Я использую ES2015 и Babel для компиляции.

[править]

Я отредактировал мой код и вопрос. Теперь я вижу, что вы, ребята, хотите сказать «удалить $».

U не понял меня. Я хочу объявить код HTML с некоторыми привязками переменных (как строку) + некоторый класс контекста, который должен содержать всю логику для объявленного шаблона. Когда у меня есть эти, я хочу передать их как params в Wizard и использовать шаблон для замены HTML этого Wizard (выполняется JSX в то же время). Другими словами. Я хочу общий механизм для динамических шаблонов в компоненте 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> 
     ); 
    } 
} 

Вы могли бы сделать что-то как то, что вы на самом деле просили, как это, но это не будет работать так, как вы ожидаете - вы не можете отрендерить function object в строку 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.