组件是相互独立、可复用的单元,一个组件可能在不同地方被用到。但是在不同的场景下对这个组件的需求可能会根据情况有所不同,例如一个点赞按钮组件,在我这里需要它显示的文本是“点赞”和“取消”,当别的同事拿过去用的时候,却需要它显示“赞”和“已赞”。如何让组件能适应不同场景下的需求,我们就要让组件具有一定的“可配置”性。

React.js 的 props 就可以帮助我们达到这个效果。每个组件都可以接受一个 props参数,它是一个对象,包含了所有你对这个组件的配置。就拿我们点赞按钮做例子:

下面的代码可以让它达到上述的可配置性:

class LikeButton extends Component {
constructor () {
super()
this.state = { isLiked: false }
} handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked
})
} render () {
const likedText = this.props.likedText || '取消'
const unlikedText = this.props.unlikedText || '点赞'
return (
<button onClick={this.handleClickOnLikeButton.bind(this)}>
{this.state.isLiked ? likedText : unlikedText}

配置组件的 props的更多相关文章

  1. React.js 小书 Lesson11 - 配置组件的 props

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson11 转载请注明出处,保留原文链接和作者信息. 组件是相互独立.可复用的单元,一个组件可能在不 ...

  2. 第七十二篇:Vue组件的props

    好家伙, 1.组件的props props是组件的自定义属性,在封装通用组件的时候,合理的使用props可以极大的提高组件的复用性 来假设一下,如果我们需要两个组件分别显示不同的值 目录结构如下: H ...

  3. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...

  4. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  5. Vue.js 系列教程 2:组件,Props,Slots

    原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...

  6. 【转存】Vue组件选项props

    原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过  ...

  7. prop-types:该第三方库对组件的props中的变量进行类型检测

    利用prop-types第三方库对组件的props中的变量进行类型检测

  8. 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考

    不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...

  9. Vue 父子组件传值 props

    1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...

随机推荐

  1. Redis使用基本套路

    Redis的数据,通常都是来自于数据库. 存入Redis当中,可以快速的查询.不用每次都关联查询,然后其他处理什么的. 通常可以把一些,不经常变的数据存储其中. 避免数据变动,而Redis缓存数据不变 ...

  2. 关于View转化成bitmap保存成图片

    产品今天说项目分享时要分享出一张  封面图片 + 几行文字 + 二维码图片 的图片. 思索了一下 封面图片和二维码图片让后台给接口得到地址, 主要还是找个方式得到一个包含这些内容的图片.于是就想能不能 ...

  3. sql注入原理与实践

    转自:http://blog.csdn.net/stilling2006/article/details/8526458 1.1.1 摘要 日前,国内最大的程序员社区CSDN网站的用户数据库被黑客公开 ...

  4. Objective-C Runtime(二)消息传递机制

    在对象上调用方法是包括Objective-C的众多语言都具备的功能.但在Objective-C中,这个术语叫『传递消息』(pass a message).『消息』有「名称」(name)或「选择子」(s ...

  5. JavaScript-Tool:jqgrid

    ylbtech-JavaScript-Tool:jqgrid jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本. 1.返回顶部   2.返回顶部   3.返回顶部   ...

  6. Windows下findstr命令的使用

    命令:findstr 参数解释 /b          如果位于行的开头则匹配模式. /e         如果位于行的末尾则匹配模式. /l         使用文字搜索字符串. /r        ...

  7. 洛谷 - P2444 - 病毒 - AC自动机

    https://www.luogu.org/problemnew/show/P2444 有点恶心,不太明白fail的意义. #include<bits/stdc++.h> using na ...

  8. Codeforces - 1114C - Trailing Loves (or L'oeufs?) - 简单数论

    https://codeforces.com/contest/1114/problem/C 很有趣的一道数论,很明显是要求能组成多少个基数. 可以分解质因数,然后统计各个质因数的个数. 比如8以内,有 ...

  9. [置顶] 一位ACMer过来人的心得

    刻苦的训练我打算最后稍微提一下.主要说后者:什么是有效地训练? 我想说下我的理解.        很多ACMer入门的时候,都被告知:要多做题,做个500多道就变牛了.其实,这既不是充分条件.也不会是 ...

  10. bzoj 4316: 小C的独立集【仙人掌dp】

    参考:https://www.cnblogs.com/clrs97/p/7518696.html 其实和圆方树没什么关系 设f[i][j][k]为i点选/不选,这个环的底选不选 这个底的定义是设u为这 ...