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

Answer 2

原因在与template会被react解析为原生元素，而浏览器是没有这个元素的，因此会有问题。react根据你的Tag首字母是小写就是原生元素