React.js——列表渲染

前言

同样是列表渲染，React.js个人认为略显笨拙…相比较Vue.js，可能不会太友好，但是确实ES6的语法写起来很爽…哈哈

基本格式

函数式列表组件（举例）

• 写法一

function list(props) {
	const numbers =  props.numbers;
	var listItems = numbers.map((numer) => 
		<li key={number.toString()}>{number}</li>
	);
	return (
		<ul>
			{listItems}
		</ul>
	);
}

const numbers = [1, 2,  3,  4, 5, 6];

//挂载
ReactDOM.render(
		<List numbers={numbers}/>.,
		document.getElementById('root')
)

• 写法二

function list(props) {
	return (
		<ul>
			{props.numbers.map((numer) => 
				<li key={number.toString()}>{number}</li>
	        )}；
		</ul>
	);
}

const numbers = [1, 2,  3,  4, 5, 6];

//挂载
ReactDOM.render(
		<List numbers={numbers}/>.,
		document.getElementById('root')
)

列表渲染要点

• 毋庸置疑，只要是列表渲染，无论是在React.js或Vue.js中key的绑定都非常重要，列表的每一项都需要有一个唯一的key用于React识别每一个列表项，并且React.js中的key需要传的参数为String类型
• key的设置，key必须设置在就近的列表项中，即使列表项是一个组件，但并不是把key设置该列表项组件的模板中!
• key的值不是代表全局唯一，只是代表同一个渲染的列表中的唯一
• key属性只是传递给React，当要使用key所对应的值时，应该通过定义其他属性传递和使用

如果你和我同样是一个young coder!
欢迎关注本人公众号Code center——春繁秋实，年年常茂。