react学习12-React 组件化—组件属性的延展操作

组件属性的延展操作

• 组件标签传递属性时可以借助对象的延展操作，一次性把所有的属性添加进去

import React from 'react'

class Test extends React.Component {
    render () {
        return (
            <div>
                <div>{this.props.msg}</div>
                <div>{this.props.info}</div>
                <div>{this.props.abc}</div>
            </div>
        )
    }
}

class PropsTest extends React.Component {
    render () {
        let obj = {
            msg: 'hi',
            info: 'coniqiwa',
            abc: '123'
        }
        // 如下的解构表示从obj中单独解构出msg，其余的属性赋值给other
        let {msg, ...other} = obj
        return (
            <div>
                <h1>组件属性的延展操作</h1>
                <hr/>
                <Test msg='hello' info='nihao'/>
                <Test {...obj}/>
                <Test {...other}/>
            </div>
        )
    }
}

export default PropsTest