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';