React里props的用法

props运用场景

组件传参
父传子
场景一：

传递变量
父组件中直接绑定变量
<Son data={obj}/>
<Son data={obj}{...obj2}/>
子组件this.props.data接收
data 是自定义的属性名

为什么传的第二个对象不解构会报错？
因为第一个对象会有data作为属性名，而第二个对象不解构就没有属性名
场景二：
传递内容

组件极少部分不同时使用
父组件中双标签包裹内容
我是父组件传来的内容
子组件用this.props.children接收
一般用闭合标签，也就是为了这样传递参数
场景三：
传递组件
大多用于子组件大部分相同，少数不同时使用
父组件绑定组件名称<Parent left={ <Son1> }> <Parent left={ <Son2> }>
子组件this.props.left接收
left 是自定义的属性名

示例

父传子

父组件

import React, { Component } from 'react';
import One from './one.jsx'
import Two from './two.jsx'
import Three from './three.jsx'
import Four from './four.jsx'
import Five from './five.jsx'

class Props extends Component {
  render() {
    const obj = {
      age:'32',
      name: "张三"
    }
    const obj2 = {
      job: '前端工程师'
    }
    return (
      <div className="props_main">
        <h3>props的使用场景有哪些</h3>
        <One title="全国名师推荐" />
        {/* 复合数据类型需要用扩展运算符，否则会报错。因为不用扩展运算符，没有属性去接收 */}
        <Two data={obj} {...obj2} />
        <Three>
          <a href="#">
            更多&gt;&gt;
          </a>
        </Three>
        <Three />
        <Four left={<Five />} />
      </div>
    )
  }
}
export default Props

子组件

One子组件

import React, { Component } from 'react';
class One extends Component {
  render() {
  //父组件传一个属性title，子组件用this.props.title接收
    return (
      <div className="props_main">
        <h3>one</h3>
        {/* 第一种传参方法 */}
        {this.props.title}//全国名师推荐
      </div>
    )
  }
}
export default One

Two组件

//这是复合型组件
import React, { Component } from 'react';
class Two extends Component {
  render() {
    const { name } = this.props.data
    const { data,  job } = this.props
    return (
      <div className="props_main">
        <h3>two</h3>
        {this.props.data.name}//元芳
        {name}//元芳
        {data.age}//32
        {job}//前端工程师
      </div>
    )
  }
}
export default Two

Three组件

import React, { Component } from 'react';
class Three extends Component {
  render() {
    return (
      <div className="props_main">
        <h3>three</h3>
        {/* 这种传参方法 ,可以被复用 */}
        {this.props.children}//更多>>
      </div>
    )
  }
}
export default Three

Four组件

import React, { Component } from 'react';
class Four extends Component {
  render() {
    return (
      <div className="props_main">
        <h3>Four</h3>
        {/* 第三种传参方法  */}
        {this.props.left}//我是第五个组件
      </div>
    )
  }
}
export default Four

Five组件

import React, { Component } from 'react';
class Five extends Component {
  render() {
    return (
      <div className="props_five">
        <h3>我是第五个组件</h3>
      </div>
    )
  }
}
export default Five