React模板中的绑定函数

Question

我想创建一个简单的Wizard组件。我不知道如何为handleChange输入事件绑定onChange函数以及如何进入传递的上下文（这是我在某处定义并在ParentClass中实例化的自定义类）。

  

未捕获的SyntaxError：意外的令牌}

这是我为测试而创建的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进行编译。

[编辑]

我编辑了我的代码和问题。我现在看到你们的意思是“删除$”。

你不明白我。我想用一些变量绑定声明HTML代码（作为字符串）+一些应包含声明模板的所有逻辑的上下文类。当我有这些时，我想将它们作为参数传递给Wizard并使用模板替换此HTML的{​​{1}}（同时执行Wizard）。换一种说法。我想在JSX组件中使用动态模板的通用机制。

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来完成你想要的更好。