09-组件化进阶（三）-组件属性的延展操作——...延展操作符-从param对象中解构出若干参数，其余属性赋值给other & react中父子传值

组件属性的延展操作——…延展操作符-从param对象中解构出若干参数，其余属性赋值给other & react中父子传值

实例

第一步：在APP.js同层级的component下新建06.js

第二步：在App.js中进行导入

import React from 'react';
import './App.css';
import BookManager from './component/06.js'

function App () {
  return (
    <div>
      <BookManager/>
    </div>
  )
}

export default App;

06.js文件如下

/*
  组件属性的延展操作
*/
import React from 'react'

class Parent extends React.Component {

  render () {
    let param = {
      msg: 'tom',
      info: 'jerry',
      foo: 'spike'
    }
    // 从param对象中解构出foo，其余属性赋值给other
    let {foo, ...other} = param
    return (
      <div>
        <Child msg='hello' info='nihao' foo='hi'/>
        <Child {...param}/>
        <Child {...other}/>
      </div>
    )
  }
}

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

export default Parent

npm run start启动项目，页面如下：