react 条件渲染

天大地大妈咪最大 提交于 2020-02-24 12:46:03
1、讲jsx内容放进数组里,然后{}解析,会自动去掉[ ]和",",展现数组内容
2、利用arr.map(function(item,index){return xxx})

代码示例:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

let arr=[1,2,3]
let arr2=[<h1>1</h1>,<h1>2</h1>,<h1>3</h1>]
class A extends React.Component{
	constructor(props){
		//将props传递给父类构造器
		super(props);
		this.state={
			arr3:[{
				name:'jeff',
				age:18
			},{
				name:'mike',
				age:19
			},{
				name:'tom',
				age:20
			}]
		}

	}
	render()
	{
		return(
			<div>父组件
				<ul>
					{
						arr.map(function(item,index){
							return <li key={index}>{item}</li>
						})
					}
				</ul>

				<ul>
					{arr2}
				</ul>
			</div>
		)
	}


}




ReactDOM.render(<A/>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!