美文网首页
Lesson11配置组件的props

Lesson11配置组件的props

作者: 易路先登 | 来源:发表于2019-07-26 21:48 被阅读0次
  1. 为了使得组件的可定制性更强,在使用组件的时候,可以在标签上加属性来传入配置参数。
    组件引用时添加自定义属性,都会被react收集为组件的props对象的键值对
<LikeButton likedText='已赞' unlikedText='赞' />

组件内通过this.props.xxx引用即可

 const likedText = this.props.likedText;
const unlikedText = this.props.unlikedText;
  1. 组件可以在内部通过 this.props 获取到配置参数,组件可以根据 props 的不同来确定自己的显示形态,达到可配置的效果。
  2. 可以通过给组件添加类属性 defaultProps 来配置默认参数。
  3. props 一旦传入,你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props,从而达到更新的效果。
  4. 任何类型的数据均可作为组件的参数,包括字符串、数字、对象、数组、甚至是函数等等。
    (1).. 例如现在我们把一个对象传给点赞组件作为参数:
 <LikeButton wordings={{likedText: '已赞', unlikedText: '赞'}} />

(2).. 把一个函数作为组件参数:

<LikeButton
wordings={{likedText: '已赞', unlikedText: '赞'}}
onClick={() => console.log('Click on like button!')}/>

而且这种将自定义函数作为参数传递给组件的做法相当于给组件绑定了事件。

相关文章

  • React.js 小书 Lesson11 - 配置组件的 pro

    React.js 小书 Lesson11 - 配置组件的 props 本文作者:胡子大哈本文原文:http://h...

  • Lesson11配置组件的props

    为了使得组件的可定制性更强,在使用组件的时候,可以在标签上加属性来传入配置参数。组件引用时添加自定义属性,都会被r...

  • vue-props(1)

    props 父组件给子组件传值 父组件:在组件元素中配置要传递的属性和值 子组件,配置props数据,接收父组件传...

  • vue路由传参

    第一种:props 配置:组件内定义:props: ['id']路由映射配置,开启props:true :{ ...

  • react组件浅谈

    组件属性 props 组件的属性, 主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参...

  • vue路由传值

    第一种:props配置 组件内定义: 路由映射配置,开启props:true : 跳转传参: 1、标签跳转 2.函...

  • React进阶组件--props、组件通讯(React学习笔记_

    React进阶组件 组件的props、组件通信 组件的props 组件是封闭的,要接收外部数据应该通过props来...

  • vue学习(53)vue-router(5)

    路由的props配置作用:让路由组件更方便的收到参数 备注:如果props设置为true,那么接收不要query类...

  • 2018-05-23 (表严肃)笔记二

    二、组件 全局及局部组件 配置组件点赞的实现: 组件通信之父子通信(1) 父子通信 props: 在当前页面中点击...

  • props

    每个组件都存在Props属性,函数声明式组件(props),类声明式组件(this.props) 组件标签中所有的...

网友评论

      本文标题:Lesson11配置组件的props

      本文链接:https://www.haomeiwen.com/subject/mhgdrctx.html