Question

我想知道JSX标签内的字符串值与变量混合的最佳实践是什么，我列出了我熟悉的选项：

render() {
    const {totalCount} = this.state;
    const totalCountStr = `Total count: ${totalCount}`;
    return (
        <div>
            <h1>Total count: {totalCount}</h1> // 1
            <h1>`Total count: ${totalCount}`</h1> // 2
            <h1>{totalCountStr}</h1> // 3
        </div>
    );
}

什么是最佳实践或用例以不同的方式使用它们？

谢谢！

Answer 1

React JSX当前不支持模板文字。正确的方法是这样的：

<h1>Total count: {this.state.totalCount}</h1>

编辑：您的第三种方法也是正确的，但由于调试问题，我个人不建议这样做，因为随着代码扩展，您需要扫描方括号

<h1>{`Total count: ${this.state.totalCount}`}</h1>

模板文字作为JSX中的字符串内容

1 个答案: