首頁猿問如何呈現(xiàn)反應(yīng)中的對(duì)象數(shù)組？

如何呈現(xiàn)反應(yīng)中的對(duì)象數(shù)組？

JavaScript React.JS

達(dá)令說 2019-07-17 16:43:16

如何呈現(xiàn)反應(yīng)中的對(duì)象數(shù)組？你能告訴我如何在JS中渲染列表嗎？我確實(shí)喜歡這個(gè)https：/plnkr.co/EDIT/X9Ov5roJtTSk9YhqYUdp？P=預(yù)覽class First extends React.Component { constructor (props){ super(props); } render() { const data =[{"name":"test1"},{"name":"test2"}]; const listItems = data.map((d) => <li key={d.name}>{d.name}</li>; return ( <div> hello </div> ); }}

查看完整描述

2 回答

呼如林

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超3個(gè)贊

你可以用兩種方式來做：

第一：

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }

第二：直接寫入返回中的map函數(shù)。

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }

反對(duì) 回復(fù) 2019-07-17