react 列表&Key
循环输出想显示的内容
//想输出的单个项目
function MsgItem(props) {
return <p id={props.num}>第{props.num}条信息 <button name={props.num}>删除</button></p>;
}
function MsgList(props) {
var count = Number(props.count);
var numList = [];
for (let i = 0; i < count; i++) {
numList[i] = i + 1;
}
//为单个项目设置唯一key
const msgItems = numList.map((num) =>
<MsgItem key={num.toString()} num={num} />
);
//输出一个项目组
return (
<div>{msgItems}</div>
);
}
class Deleter extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<MsgList count={this.props.count} />
);
}
}
ReactDOM.render(
<Deleter count="4"/>,
document.getElementById('react_test')
);