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的一部分。如果您没有正确配置项目，则字符串文字将不起作用。尝试在返回之前提升他的字符串连接，并直接在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中的字符串模板

1 个答案: