react 条件渲染

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();

来源：CSDN

作者：神奇大叔

链接：https://blog.csdn.net/weixin_43294560/article/details/104473824