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

问题是template中包含的逻辑没有执行（它将所有内容都写成Wizard中的字符串）。

我使用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} />
    );
}

希望它有所帮助！

React中的动态模板

1 个答案: