react組件-組件嵌套

1、組件輸出

輸出組件

表達式{{}}不只能輸出數據，也能直接輸出元素

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>
    }
}
//...複製代碼

2、組件嵌套

組件能夠像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>
        }
    }
}複製代碼