React项目div容器内figure标签无法渲染显示问题

React初学者参照教程开发应用时，组件内编写的figure标签未正常渲染，Chrome开发者工具元素面板中无法找到该标签。教程示例中div容器包含figure子元素，但实际代码运行后仅渲染出外层div标签，无预期的figure子节点。

参考截图 #

• 教程div容器包含figure子元素示例截图
• 实际运行效果截图（仅显示div标签）

相关文件代码 #

index.js #

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Main from './Components/Main'
import './styles/stylesheet.css'

ReactDOM.render(<Main/>, document.getElementById('root'));

ReactDOM.render(, document.getElementById('root'));

Main.js #

import React, { Component } from 'react'
import Title from './Title'
import Photowall from './Photowall'
const posts = [{
id: "0",
description: "beautiful landscape",
imageLink: "https://image.jimcdn.com/app/cms/image/transf/none/path/sa6549607c78f5c11/image/i4eeacaa2dbf12d6d/version/1490299332/most-beautiful-landscapes-in-europe-lofoten-european-best-destinations-copyright-iakov-kalinin.jpg" +
"3919321_1443393332_n.jpg"
},
{
id: "1",
 description: "Aliens???", imageLink: "https://s3.india.com/wp-content/uploads/2017/12/rocket.jpg"
}, 
{
id: "2",
 description: "On a vacation!",imageLink: "https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2017/08/24/104670887-VacationExplainsTHUMBWEB.1910x1000.jpg"
}

class Main extends Component{
render(){
return <div>
          <Title title={'Photowall'}/>
          <Photowall posts={posts}/>
        </div>
}

}
export default Main

Photowall.js #

import React,{ Component} from 'react'
import Photo from './Photo'
class Photowall extends Component{
render() {
return

    <div className='photo-grid'>
        {this.props.posts.map((post,index)=> <Photo key={index} post={post}/>)}
    </div>

  }
  }
export default Photowall

Photo.js #

import React, {Component} from "react";

class Photo extends Component{
render(){
const post =this.props.post
return <figure className="figure"></figure>

}
}
export default Photo

stylesheet.css #

html{
font-size: 10px;
}
h1{
font-family: billabong;
text-align: center;
font-size: 13rem;
margin: 2rem 0rem;
font-weight: 400;
letter-spacing: 4px;
color: grey;
}

@font-face {
font-family: billabong;
src: url('https://fonts.cdnfonts.com/s/13949/Billabong.woff') format('woff');
}
.photo-grid {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
} 

.figure {
flex-basis: calc (33.333%-4rem);
border: 1px solid #d3d3d3;
padding: 2rem;
flex-grow: 1;
margin: 0 2rem;   
}

核心问题是JavaScript自动分号插入（ASI）机制触发：Photowall.js的render方法中，return关键字单独占一行，JS引擎会自动在return后插入分号，等同于执行return;，后续的JSX内容不会被返回，因此Photowall组件不会渲染任何子内容，内部的Photo组件、figure标签自然不会生成。
除此之外代码还存在3个会导致运行/样式异常的问题：

1. index.js末尾存在语法无效的空渲染代码ReactDOM.render(, document.getElementById('root'));
2. Main.js中定义的posts数组末尾缺失闭合方括号]，会触发语法报错
3. CSS中calc函数写法错误，calc和左括号之间不能有空格，运算符两侧需要加空格，否则flex布局样式不生效

1. 修改Photowall.js的render方法，用括号包裹返回的JSX，紧跟在return后，避免ASI误触发：

render() {
  return (
    <div className='photo-grid'>
        {this.props.posts.map((post,index)=> <Photo key={index} post={post}/>)}
    </div>
  )
}

2. 删除index.js末尾无效的空渲染行。
3. 给Main.js中的posts数组补上末尾缺失的闭合方括号]。
4. 修改CSS中错误的calc写法：

.figure {
flex-basis: calc(33.333% - 4rem);
border: 1px solid #d3d3d3;
padding: 2rem;
flex-grow: 1;
margin: 0 2rem;   
}

修复后重新运行项目，即可正常渲染figure标签。

内容的提问来源于stack exchange，提问作者ronin