react08_列表&Key

react 列表&Key

循环输出想显示的内容

//想输出的单个项目
function MsgItem(props) {
    return <p id={props.num}>第{props.num}条信息&nbsp;&nbsp;<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')
);