react組件嵌套

輸出組件

表達式({ })不僅能輸出數(shù)據(jù)梦抢，還是輸出元素般贼。

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        let span = <span>spanaaa</span>
        return (
            <div>{this.props.text},{span}</div>
        )
    }
}
let rootCont = document.getElementById('root')
let a = <Cmp text="我是A"></Cmp>
ReactDOM.render((
    <div>
        {a}
        <Cmp text="我是B"></Cmp>
    </div>
),rootCont)
//輸出：
// 我是A,spanaaa
// 我是B,spanaaa

輸出組件數(shù)據(jù)

直接聲明一個數(shù)組，數(shù)組中為相應的組件，如下代碼中的寫法直接使用{spanlist },頁面中是可以直接輸出的哼蛆，但是控制臺是會報錯蕊梧，提示沒有設置key,在react中的虛擬DOM變化的時候，就需要動態(tài)的設置真是的DOM腮介，這個時候就需要通過key來跟蹤循環(huán)中的虛擬DOM肥矢，來相應真實DOM的正確渲染,key不能重復,且不能修改，修改的話后可能會引起報錯樣式竄行叠洗。如果是使用的單變量進行一個一個添加的話甘改，react會自動的添加key

Warning: Each child in an array or iterator should have a unique "key" prop.

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        let spanlist = [
            <p>組件數(shù)組1</p>,
            <p>組件數(shù)組2</p>,
            <p>組件數(shù)組3</p>
        ]
        return (
            <div>{spanlist}</div>
        )
    }
}
let rootCont = document.getElementById('root')
ReactDOM.render(<Cmp></Cmp>,rootCont)
//輸出：
// 組件數(shù)組1
// 組件數(shù)組2
// 組件數(shù)組3

相對正確的使用如下，但不建議使用循環(huán)中的index作為key灭抑，因為在后期中可能會在數(shù)組中插值

class Cmp extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        let spanlist = [1,2,3]
        return (
            <div>{spanlist.map((item,index)=>{
                return <p key={index}>我是數(shù)組的第{item}個</p>
            })}</div>
        )
    }
}
let rootCont = document.getElementById('root')
ReactDOM.render(<Cmp></Cmp>,rootCont)
//輸出：
// 我是數(shù)組的第1個
// 我是數(shù)組的第2個
// 我是數(shù)組的第3個

組件嵌套

組件的嵌套就像是html嵌套一樣使用十艾。

class Parent extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        let childList=[
            {
                ID:'1',
                text:'子組件1'
            },
            {
                ID:'2',
                text:'子組件2'
            }
        ]
        return (
            <div>
                <p>我是父組件中的p元素</p>
                <ul>
                    <Child></Child>
                    <Child text="單獨使用傳入的text"></Child>
                    {childList.map(item=>{
                        return <Child key={item.ID} text={'循環(huán)輸出的 '+item.text}></Child>
                    })}
                </ul>
            </div>
        )
    }
}
class Child extends React.Component{
    constructor(...args){
        super(...args)
    }
    render(){
        return (
            <li>我是子組件：傳值為：{this.props.text?this.props.text:'空'}</li>
        )
    }
}
ReactDOM.render(<Parent></Parent>,document.getElementById('root'))
//輸出：
// 我是父組件中的p元素
//     我是子組件：傳值為：空
//     我是子組件：傳值為：單獨使用傳入的text
//     我是子組件：傳值為：循環(huán)輸出的 子組件1
//     我是子組件：傳值為：循環(huán)輸出的 子組件2
//     我是子組件：傳值為：循環(huán)輸出的 子組件3

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者