React JSX 中的字符串模板

【问题标题】：String Template in React JSXReact JSX 中的字符串模板
【发布时间】：2018-12-30 13:18:42
【问题描述】：

我创建了一个服务器并在其中插入了一些数据，现在当我想引用该数据时，它不显示名称字段，我使用字符串模板从服务器读取名称字段并显示它，但它不是工作，语法有问题吗？这是我在 React 中的组件：

const Rank = ({ name, entries }) => {
    return(
        <div>
            <div className='white f3'>
                {` ${name}  , your current rank is ... `}
            </div>
            <div className='white f1'>
                {entries}
            </div>
        </div>
        );
}

{entries} 显示正确，但我没有收到 {name} 的任何数据。

【问题讨论】：

{name}呢，你现在的排名是……"
？
仍然无法正常工作...我不知道该怎么办
name 在返回值上方打印是否有值？语法看起来不错
是的，它有价值！

标签： reactjs jsx react-server

【解决方案1】：

请注意字符串文字是 ES6 的一部分。如果您没有正确配置项目，则字符串文字将不起作用。尝试在返回之前提升他的字符串连接并直接在 JSX 中使用：

const rankOutput = name + ', your rank ...';

并在 JSX 中将其用作：

{rankOutput}

所以最终的代码应该是这样的：

const Rank = ({ name, entries }) => {
const rankOutput = name + ', your current rank is ...';
return(
    <div>
        <div className='white f3'>
            {rankOutput}
        </div>
        <div className='white f1'>
            {entries}
        </div>
    </div>
    );
}

【讨论】：

你的意思是，不需要在Rank中添加为道具？
我的意思是，保留 name 属性，但在 return 语句之前形成 rankOutput 并使用它而不是 {` ${name} ，您当前的排名 ....`}