首頁猿問 reactjs 能不能使用...

reactjs 能不能使用 template 標(biāo)簽？就像vue那樣用？

Vue.js

慕標(biāo)5832272 2019-03-09 16:04:37

比如有個“復(fù)讀機組件” ，其中 ul 包裹的內(nèi)容的下一級應(yīng)該是li標(biāo)簽，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={['復(fù)讀機']} />

查看完整描述

2 回答

慕后森

TA貢獻(xiàn)1802條經(jīng)驗獲得超5個贊

找到答案了

鏈接

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>
    );
  }
}

反對回復(fù) 2019-03-09