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首字母是小写就是原生元素

Answer 3

那是因为你的浏览器支持template标签了，可以看下webcomponents

Answer 4

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 (
              <li key={index}>{item}</li>
          );
        })}
      </ul>
    );
  }
}