react组件嵌套

输出组件

• 表达式({ })不仅能输出数据，还是输出元素。

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

输出组件数据

• 直接声明一个数组，数组中为相应的组件，如下代码中的写法直接使用{spanlist },页面中是可以直接输出的，但是控制台是会报错，提示没有设置key,在react中的虚拟DOM变化的时候，就需要动态的设置真是的DOM，这个时候就需要通过key来跟踪循环中的虚拟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>组件数组1</p>,
            <p>组件数组2</p>,
            <p>组件数组3</p>
        ]
        return (
            <div>{spanlist}</div>
        )
    }
}
let rootCont = document.getElementById('root')
ReactDOM.render(<Cmp></Cmp>,rootCont)
//输出：
// 组件数组1
// 组件数组2
// 组件数组3

• 相对正确的使用如下，但不建议使用循环中的index作为key，因为在后期中可能会在数组中插值

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}>我是数组的第{item}个</p>
            })}</div>
        )
    }
}
let rootCont = document.getElementById('root')
ReactDOM.render(<Cmp></Cmp>,rootCont)
//输出：
// 我是数组的第1个
// 我是数组的第2个
// 我是数组的第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={'循环输出的 '+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
//     我是子组件：传值为：循环输出的 子组件1
//     我是子组件：传值为：循环输出的 子组件2
//     我是子组件：传值为：循环输出的 子组件3