react 的 传递属性 props 详解

什么是 props ？

就是你在使用一个组件的时候希望这个组件可以复用，希望他里面的形态、所需的数据可以在我们调用的时候可以动态的传进去。

props 哪里来的？

我们组件使用类创建的时候你需要继承 React.component，这个 props 就是继承React 来的

• 打印当前实例 console.log(this)
  

传递属性

<组件名 属性名=值 属性名2=值2 .. />

propName="字符"  propName={js数据类型}

• 调用组件名的时候可以传递一个或多个属性
• 属性的名字是小驼峰
  • 他的值双引号就是字符串，
  • 单花括号就是 jsx 的表达式
  • 表达式就是一个对象后面掉一个 api() 就是一个表达式，声明一个变量就是语句了，调用一个变量就是表达式了

使用属性

{this.props.属性名}

• this 代表的是组件本身（将来的实例）
  • 在类里面使用 this 它指向的是组件本身
  • 上图中我们看到 组件本身是有 props 的 ，就然 this代表组件本身，那我们就可以通过 this.props.xxx来获取我们想要的信息
• 对象无法直接通过{对象}展示
  • 在 react 在 react-dom 渲染时，数据里面的对象拉出来不可以之间加载，要精确到里面的键才可以

使用展示：

import React from 'react';
import ReactDom from 'react-dom';

//props  传递给组件的属性（数据）
class Nav extends React.Component{
  render(){
    return (
      <nav>
        <a>{this.props.json.aa}</a>
        <a href="http://www.baidu.com">react</a>
        <a href="http://www.baidu.com">组件</a>
      </nav>
    );
  }
}
class App extends React.Component{
  render(){
    return (
      <div>
        <Nav json={{aa:1,bb:2}}/>
        <Footer text="copy right heheda123"/>
      </div>
    )
  }
}

ReactDom.render(
  <App/>,
  document.querySelector('#root')
);

图示介绍：

类型检查

• 如果别人在调用我们的组件的时候乱传不同的数据会导致我们数据可能无法产生预期效果
• 这时就需要借助第三方类型检查库
• 需要下载 yarn add prop-types -save /或者/ npm install prop-types -save
• react 组件就是一个类，类上面就有静态属性 defaultProps 和 propTypes

import propsTypes from 'prop-types'

//默认值:		
组件.defaultProps={
	propName:值,
	键:值,
}

//类型约定:
组件.propTypes={
	propsName:propsTypes库.类型名,
	xx:类型，
}
//propsTypes.array/bool/func/number/object/string

//必传参数
propName: propsTypes库.类型名.isRequired

示例：

Input.defaultProps = {
  value:'',
  onChange:()=>{},
  name:''
};

Input.propTypes={
  value: propsTypes.string,
  name: propsTypes.string,
  onChange: propsTypes.func
};

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props

• 正常情况下 props 的拥有权不属于当前组件，是别人传给你的，你用的时候用 props 来引用，所以修改的权限应该由上面来决定