简单易懂的React魔法(08):使用JSX一次渲染多个元素

现在我们的代码十分一颗赛艇，不过我希望你真的学到了东西。为了让教程更加有趣，我们来打印随机的名字和国家（这哪里有趣了？）
使用chance库很容易做到这些，如果你上一章节试验了三元表达式，先删掉它：
修改Detail.js的render方法：

src/pages/Detail.js

return <p>Hello, {chance.first()}!</p>;

这很简单，再添加一个随机生成的国家名：

chance.country({ full: true });

这样会返回澳大利亚或者别的什么名字，你可能会觉得我们把render写成这样：

render() {
    return <p>Hello, {chance.first()}.</p>
        <p>You're from {chance.country({ full: true })}.</p>;
}

不过你这样写会报错，你在浏览器的控制台里会发现错误，告诉你JSX是不合法的，为什么会这样呢？

好吧，这是另一个你需要看到JSX在编译的时候发生了什么的例子，上一个是三元表达式。Render方法只能返回一个唯一的值，当应用被打包时，这些p标签会被转换成代码。所以当应用打包时，render方法会试图返回两个p标签，这是不被允许的。
解决方法很简单，把两个p标签包在另一个标签里。
下面是报错的代码:

render() {
    return <p>Hello, {chance.first()}.</p>
    <p>You're from {chance.country({ full: true })}.</p>;
}

下面是修改后的代码：
src/pages/Detail.js

render() {
    return (<div>
        <p>Hello, {chance.first()}.</p>
        <p>You're from {chance.country({ full: true })}.</p>
    </div>);
}

里面嵌套多少层元素都无所谓，你只需要保证返回的都在一个标签里就行。

在render里不能返回多个JSX值，会报错。