React循环

最新推荐文章于 2024-04-13 03:59:56 发布

原创最新推荐文章于 2024-04-13 03:59:56 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

12 篇文章

订阅专栏

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

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;