0.避免无意义的父节点
import React from 'react';
const SecondsTop = ({title}) => [
<div className="top">
<i className="logo1"/>
</div>,
<div className="top">
这是{title}
</div>
];
export default SecondsTop;
1.优雅的渲染一个list
经常遇到的开发需求,从后台来到一个list数据，在前端展示出来
先手动造一个list数据
import React from 'react';
class Index extends React.Component{
constructor(props){
super(props);
this.state = {
list: [
{id:1, title:'测试1'},
{id:2, title:'测试2'},
{id:3, title:'测试3'},
{id:4, title:'测试4'},
{id:5, title:'测试5'},
{id:6, title:'测试6'},
]
};
}
handleItemDel(id){
//console.log(id)
let list = this.state.list;
list.splice(list.findIndex(data => data.id === id ), 1);
this.setState({list: list})
}
render(){
let {list} = this.state;
return(
<div>
{
list.map(data => <li key={data.id}>{data.title}
<button onClick={()=>this.handleItemDel(data.id)}>删除</button></li>)
}
</div>
)
}
}
2.如何处理List里面的Item（增删改查）
[见上面代码]
（1）删除：先增加一个删除按钮
（2）给按钮添加事件，绑定函数，并把id传参过去，点击删除按钮，看能否打印出当前id
（3）接下来写删除事件：（handleItemDel函数）
补充知识：
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
语法：
arrayObject.splice(index,howmany,item1,.....,itemX)
【index:必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany:必需。要删除的项目数量。如果设置为0，则不会删除项目。
itme1,...,itemX:可选。向数组添加的新项目。】
代码：http://www.w3school.com.cn/tiy/t.asp?f=jseg_splice
findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
·当数组中的元素在测试条件时返回true时,findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
·如果没有符合条件的元素返回-1
注意：findIndex() 对于空数组，函数是不会执行的。findIndex() 并没有改变数组的原始值。
