react组件-组件嵌套

一、组件输出

输出组件

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

class App extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        let span=测试一下
        return{
            

                {span}
            
        };
    }
}
let root=document.getElementById('box');
ReactDOM.render(,root)复制代码

组件数组

可以直接输出一组元素

//...
render(){
    let arr=[
        //key:用于绑定虚拟DOM和真实DOM
        aaa
        bbb
        ccc
    ];
    return {
        

            {arr}
        
    };
}
//...复制代码

关于key

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

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

key的选择标准：

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

组件循环

//...
render(){
    let arr=[12,5,8];
    return(){
        

            {arr.map((item,index)=>{
                //错误
                "index">{item}
                //正确
                {item}
            ))}
        
    }
}
//...复制代码

二、组件嵌套

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

//子组件
class Item extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        return{
            

                //this.props包含父级传递进来的属性
                {this.props.data}
                姓名：{this.props.name}

                年龄：{this.props.age}
            
        }
    }
}
//父组件
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 {
            

                {users.map(user=>(
                    
                ))}
            
        }
    }
}复制代码

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