比如有個“復讀機組件” ，其中 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={['復讀機']} />
2 回答
慕容708150
TA貢獻1831條經驗 獲得超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 (
- <template key={index}>+ <React.Fragment key={index}>
<li>{item}</li>
<li>{item}</li>
<li>{item}</li>+ </React.Fragment>- </template>
);
})} </ul>
);
}
}
添加回答
舉報
0/150
提交
取消