React JSX 返回关键字不起作用答案

【问题标题】：React JSX return keyword doesn't workReact JSX 返回关键字不起作用
【发布时间】：2017-10-20 16:52:22
【问题描述】：

我用了2个多小时才深刻体会到体验。

在下面的 sn-p 中，return 没有按预期工作：

return
<VideoItem
    key={video.etag}
    changeVideo={changeVideo}
    video={video} />;

为了更清楚地说明我想要return 以及应该在多行中返回的内容。

但下面的行都不起作用：

return
<VideoItem key={video.etag} changeVideo={changeVideo} video={video} />;

【问题讨论】：

【解决方案1】：

我的错误是我必须执行以下操作之一：

将return 和其余部分写在一行中：

return <VideoItem key={video.etag} changeVideo={changeVideo} video={video} />;

将返回结果用括号括起来：

return (
    <VideoItem
        key={video.etag}
        changeVideo={changeVideo}
        video={video} />);

是的，现代 JS 就是这么敏感！

【讨论】：

【解决方案2】：

您的所有内容都应包含在父标签中。典型的返回语法如下所示：

return (
  <div>
    Everything you do should be here.......
  </div>
);

注意父 <div></div>。您可以将其更改为 <h1></h1>、<b></b> 等任何内容。

【讨论】：