亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在渲染中自動遞增索引并打印數組值?

如何在渲染中自動遞增索引并打印數組值?

撒科打諢 2023-07-06 17:31:10
我有一個名稱數組,我需要循環索引并在渲染中打印名稱    const names = ['John','Sara','Michael','Timothy']`render: (props) => ({<div>props=names[];</div>});
查看完整描述

4 回答

?
繁花不似錦

TA貢獻1851條經驗 獲得超4個贊

您可以使用for ... in循環來迭代索引。


const names = ['John','Sara','Michael','Timothy'];

for(const index in names) {

  console.log(`${index} of ${names[index]}`); 

}


查看完整回答
反對 回復 2023-07-06
?
拉風的咖菲貓

TA貢獻1995條經驗 獲得超2個贊

const names = ["John", "Sara", "Michael", "Timothy"];

class Content extends React.Component {

  constructor(props) {

    super(props);

    this.state = {};

  }


  render() {

    return (

      <div>

        <h1>Names</h1>

        {this.props.names ? (

          this.props.names.map((name, index) => (

            <p key={name + index}>{name}</p>

          ))

        ) : (

          <p>No names found</p>

        )}

      </div>

    );

  }

}


ReactDOM.render(<Content names={names} />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"> </div>


查看完整回答
反對 回復 2023-07-06
?
慕工程0101907

TA貢獻1887條經驗 獲得超5個贊

您可以使用它map()來完成您的需求。


   render() {

     const names = ['John','Sara','Michael','Timothy'];

   

     return (

        <div>

            { names.map((name, index) => <div key={index}>{ name }</div> }

        </div>

     );

   }


查看完整回答
反對 回復 2023-07-06
?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

您必須改進代碼的一部分。它看起來不像是 JSX 部分。在這里,我想它可以是:


render() {

    const names = ['John','Sara','Michael','Timothy'];

    return <div>

            {names.map((item, index) => (

               <div key={index}>

                  {item}

               </div>

            ))}

          </div>;

}


查看完整回答
反對 回復 2023-07-06
  • 4 回答
  • 0 關注
  • 172 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號