React --- 组件实例的三大核心之 props

2. props

当我们需要把外界的数据传给组件时 ,需要使用 组件实例的 props属性 。

因为 state 是组件内部的。不能用 state 来直接接收创建组件后才有的数据,如请求回来的数据。

传递标签属性

给 props 传递数据是利用渲染时标签里的属性来传递的。

ReactDOM.render(, document.querySelector("#con"));

注意 :

  • 传递字符串必须使用单引号或双引号包裹起来。传递变量需要使用 { } 包裹

  • 传递数值,数值,对象需要使用 { } 包裹起来

const name = '小明'
ReactDOM.render(,document.querySelector("#con"));
数据接收

与 state 不同的是 , props 不需要自己去创建 。 在 React 实例出来后会自动在组件实例上添加 props 属性。并且将标签属性名做为键,值做为值添加给 props 对象。

// 在组件类的 render 里直接输出 this.props
// {name: "小明", age: 14, habit: Array(4), obj: {…}}
props 的简单例子
 
children 属性

jsx 支持一个标签属性 , children 属性 , 值就是标签里的值。

也就是 :

// 相当于
123

如果标签体内有值了,那么 children 属性便不会生效。

我们使用组价一般是如此的 : <组件名/> 。如果我们使用 内容

那么 “内容” 会传入组件的 props 属性内Key 就是 children

利用扩展运算符

传 Props

let props={age=13,height:31}
123
// 相当于
123

接 Props

// 相当于 let {age,height,children} = this.props
组件传参

利用 props 可以实现父子组件的数据传递

父传子 — props

提高给子组件的标签增加属性传递数据

子传父 — 通过方法

父组件给子组件通过 props 传递一个函数。这个函数定义在父组件上。

子组件调用函数时,传入参数。因为函数定义在父组件上,并且是箭头函数。因此父组件便接受到参数了,可以通过 this 对组件进行更新。

但这会导致代码变得复杂,耦合度提高,因此需要使用其他更好的方法完成子给父传参

.

propTypes 和defaultProps

在使用组件时 ,我们可能会部分数据传递的类型与实际需要的不同,或者是有的数据没有传但是组件却需要。那么我们可能需要一个机制,当我们传错时可以提醒,没传时有默认值。

因此 React 提供了一个 proptype 的包。专门服务这些需求。

因此我们需要引入,注意也要在 React核心库引入之后再引入。

你可能感兴趣的:(React学习,react,javascript,props/state,组件化,前端)