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

IT技术 javascript reactjs jsx template-literals
2021-04-29 21:38:34

我想知道将字符串值与 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>
    );
}

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

谢谢!

1个回答

React JSX 目前不支持模板文字。正确的做法是这样的:

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

编辑:您的第三种方式也是正确的,但由于调试问题,我个人不推荐它,因为您需要在代码展开时扫描方括号

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