React 中的动态模板

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 中的动态模板

Dynamic templates in React

jsx

ecmascript-6

reactjs

react-jsx