reactjs 能不能使用 template 标签？就像vue那样用？

Question

比如有个“复读机组件” ，其中 ul 包裹的内容的下一级应该是li标签，react return 一次貌似只能是一个li, 但是我每次想输出多个 li,就想到用 template 包裹一下，试了一下没有报错，但是页面空白什么也没显示import React, { Component } from 'react';export default class Repeater extends Component {   render() {    console.log(this.props);    return (      <ul>         {this.props.list.map((item, index) => {           return (            <template key={index}>               <li>{item}</li>               <li>{item}</li>               <li>{item}</li>             </template>           );         })}      </ul>     );   } }<Repeater list={['复读机']} />

Answer 1

找到答案了

链接

import React, { Component } from 'react';export default class Repeater extends Component {
  render() {    console.log(this.props);    return (      <ul>
        {this.props.list.map((item, index) => {
          return (
-             <template key={index}>+            <React.Fragment key={index}>
              <li>{item}</li>
              <li>{item}</li>
              <li>{item}</li>+            </React.Fragment>-            </template>
          );
        })}      </ul>
    );
  }
}

Answer 2

原因在与template会被react解析为原生元素，而浏览器是没有这个元素的，因此会有问题。

react根据你的Tag首字母是小写就是原生元素