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;