react组件-组件嵌套

一、组件输出

输出组件

表达式{{}}不仅能输出数据，也能直接输出元素

class App extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        let span=<span>测试一下</span>
        return{
            <div>
                {span}
            </div>
        };
    }
}
let root=document.getElementById('box');
ReactDOM.render(<App/>,root)复制代码

组件数组

可以直接输出一组元素

//...
render(){
    let arr=[
        //key:用于绑定虚拟DOM和真实DOM
        <span key=[0]>aaa</span>
        <span key=[1]>bbb</span>
        <span key=[2]>ccc</spam>
    ];
    return {
        <div>
            {arr}
        </div>
    };
}
//...复制代码

关于key

key非常重要，他关联虚拟DOM和真实DOM，从而在虚拟DOM修改时对实际DOM元素做最小化的修改以此提高性能；普通元素其实也有key，由React生成，而数组元素则需要我们指定

      注意⚠️：尽量不要用index作为key，因为index是会改变的（比如删掉一个元素，后续元素的index都会-1）

key的选择标准：

• 唯一：否则ReactDOM无法工作
• 不变：否则DOM元素混乱

组件循环

//...
render(){
    let arr=[12,5,8];
    return(){
        <div>
            {arr.map((item,index)=>{
                //错误
                <span key="index">{item}</span>
                //正确
                <span key={index}>{item}</span>
            ))}
        </div>
    }
}
//...复制代码

二、组件嵌套

组件可以像html一样嵌套使用

//子组件
class Item extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        return{
            <li>
                //this.props包含父级传递进来的属性
                {this.props.data}
                姓名：{this.props.name}<br/>
                年龄：{this.props.age}
            </li>
        }
    }
}
//父组件
class Parent extends React。Component{
    constructor(...ages){
        super(...ages)
    }
    render(){
        let user=[
            {ID:1,name:'blue',age:18},
            {ID:2,name:'张三',age:25},
            {ID:3,name:'李四'，age:21}
        ];
        return {
            <ul>
                {users.map(user=>(
                    <Item key={user.ID} name={user.name} age={user.age}/>
                ))}
            </ul>
        }
    }
}复制代码

转载于:https://juejin.im/post/5cea9908f265da1b5e72cfeb