React JSX 中的字符串模板

Question

我创建了一个服务器并在其中插入了一些数据，现在当我想引用该数据时，它不显示名称字段，我使用字符串模板从服务器读取名称字段并显示它，但是它不起作用，语法有问题吗？这是我在 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} 的任何数据。

Answer 1

请注意字符串文字是 ES6 的一部分。如果您没有正确配置项目，字符串文字将不起作用。尝试在 return 之前提升他的字符串连接并直接在 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>
    );
}

React JSX 中的字符串模板

String Template in React JSX

jsx

reactjs

react-server