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

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}

React.js 小书 Lesson11 - 配置组件的 props的更多相关文章

  1. React.js 小书 Lesson2 - 前端组件化(一):从一个简单的例子讲起

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson2 转载请注明出处,保留原文链接和作者信息. 很多课程一上来就给大家如何配置环境.怎么写 Re ...

  2. React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson4 转载请注明出处,保留原文链接和作者信息. 为了让代码更灵活,可以写更多的组件,我们把这种模 ...

  3. React.js 小书 Lesson3 - 前端组件化(二):优化 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson3 转载请注明出处,保留原文链接和作者信息. 看看上一节我们的代码,仔细留意一下 change ...

  4. React.js 小书 Lesson24 - PropTypes 和组件参数验证

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...

  5. React.js 小书 Lesson22 - props.children 和容器类组件

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...

  6. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  7. React.js 小书 Lesson19 - 挂载阶段的组件生命周期(二)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...

  8. React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...

  9. React.js 小书 Lesson8 - 组件的组合、嵌套和组件树

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson8 转载请注明出处,保留原文链接和作者信息. 继续拓展前面的例子,现在我们已经有了 Heade ...

随机推荐

  1. 动态往 datagridview 追加行、列操作

    DataGridViewTextBoxColumn acCode = new DataGridViewTextBoxColumn(); acCode.Name = "acCode" ...

  2. easyui datagrid deleteRow(删除行)的BUG

    有时候想临时保存一些数据,等确定好后在批量一次提交,但EasyUI  datagrid 用的时候添加可以正常,如果从中间删除那行号就全乱了.导致删除的时候有可能删除上一行数据. function ad ...

  3. C# Socket 发送&接收&返回

    因为工作比较忙,好久没有写过博客了,最近因项目需求,需要用到Socket来进行通信,简单写了几个例子,记录一下,代码很简单,无非就是接收与发送,以及接收到数据后返回一个自定义信息,也可以说是发送. 先 ...

  4. T-SQL查询进阶--SQL Server中的事务与锁

    为什么需要锁 在任何多用户的数据库中,必须有一套用于数据修改的一致的规则,当两个不同的进程试图同时修改同一份数据时,数据库管理系统(DBMS)负责解决它们之间潜在的冲突.任何关系数据库必须支持事务的A ...

  5. Mybatis 延迟加载策略

    延迟加载: 就是在需要用到数据时才进行加载,不需要用到数据时就不加载数据.延迟加载也称懒加载. 好处: 先从单表查询,需要时再从关联表去关联查询,大大提高数据库性能,因为查询单表要比关联查询多张表速 ...

  6. 杨辉三角的Python实现

      杨辉三角的Python实现 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 Python生成器实现杨辉三角: # python def yanghui_tr ...

  7. dos窗口运行java文件需要jar依赖

    执行java文件时候,有些里面依赖了java之外的jar,这是识别不到的,运行java命令的时候,带上jar路径: java -cp .;jar路径(加上jar名字)  java文件名 例:java ...

  8. 80端口被system(pid=4)占用

    1.查看80端口被哪个进程占用,cmd->netstat -ano | findstr 80 2.cmd->tasklist列出当前运行中的进程,或在任务管理器中查看pid为4的进程. 经 ...

  9. django-redis 使用规范

    django-redis 基于 BSD 许可, 是一个使 Django 支持 Redis cache/session 后端的全功能组件. 1,安装 django-redis 最简单的方法就是用 pip ...

  10. select展开时 重新加载 option,ie 折叠问题 以及 chrome 没有变化问题

    这个bug是因为浏览器的渲染问题引起的 一:重新加载option的渲染处理 1:火狐能重新渲染,并且select不折叠 2:ie重新渲染,但是select收缩折叠 3:chrome直接不重新进行渲染, ...