React循环

最新推荐文章于 2025-04-21 09:52:56 发布

DaftJayee

最新推荐文章于 2025-04-21 09:52:56 发布

阅读量3.9k

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_43540219/article/details/107762060

版权

react 专栏收录该内容

12 篇文章

订阅专栏

本文详细探讨了在React中如何有效地进行组件的循环渲染，包括使用map函数创建列表，管理状态和props的传递，以及优化性能的技巧，帮助开发者提升React应用的开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from 'react';

class App extends Component {

  constructor(props){
  	super(props);
  	this.state = {
  		str:'这是react数据',
  		num:1,
  		inputValue:"这是val",
  		arr:['a','b','c'],
      cityName:['北京','上海','四川']
  	}
  }
  render () {
  	return (
  		<div>

        <ul>
          {
            this.renderLi()
          }
        </ul>

  			<div>{this.state.str}</div>
  			<div>{this.state.str}</div>
  			<div>{this.state.num+1}</div>
  			<input 
  				type='text' 
  				value={this.state.inputValue}
  			/>
  			<div>{ this.setComponent() }</div>
  		</div>
  	)
  }
  setComponent(){
  	return this.state.arr.join("|");
  }
  renderLi(){
    return this.state.cityName.map((item,index)=>{//循环用.map
      return (
          <li key={index}>{item}</li>
      )
    })
  }

}
export default App;