React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。

可以使用 JSX 展开属性 来合并现有的 props 和其它值:

return <Component {...this.props} more="values" />;

如果不使用 JSX,可以使用一些对象辅助方法如 ES6 的 Object.assign 或 Underscore _.extend

return Component(Object.assign({}, this.props, { more: 'values' }));

下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性。

手动传递

大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。

var FancyCheckbox = React.createClass({
  render: function() {
    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
    return (
      <div className={fancyClass} onClick={this.props.onClick}>
        {this.props.children}
      </div>
    );
  }
});
React.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById('example')
);

但 name 这个属性怎么办?还有 titleonMouseOver 这些 props?

在 JSX 里使用 ... 传递

有时把所有属性都传下去是不安全或啰嗦的。这时可以使用解构赋值中的剩余属性特性来把未知属性批量提取出来。

列出所有要当前使用的属性,后面跟着 ...other

var { checked, ...other } = this.props;

这样能确保把所有 props 传下去,除了 那些已经被使用了的。

var FancyCheckbox = React.createClass({
  render: function() {
    var { checked, ...other } = this.props;
    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
    // `other` 包含 { onClick: console.log } 但 checked 属性除外
    return (
      <div {...other} className={fancyClass} />
    );
  }
});
React.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById('example')
);

注意:

上面例子中,checked 属性也是一个有效的 DOM 属性。如果你没有使用解构赋值,那么可能无意中把它传下去。

在传递这些未知的 other 属性时,要经常使用解构赋值模式。


var FancyCheckbox = React.createClass({
  render: function() {
    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
    // 反模式:`checked` 会被传到里面的组件里
    return (
      <div {...this.props} className={fancyClass} />
    );
  }
});

使用和传递同一个 Prop

如果组件需要使用一个属性又要往下传递,可以直接使用 checked={checked} 再传一次。这样做比传整个 this.props对象要好,因为更利于重构和语法检查。

var FancyCheckbox = React.createClass({
  render: function() {
    var { checked, title, ...other } = this.props;
    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
    var fancyTitle = checked ? 'X ' + title : 'O ' + title;
    return (
      <label>
        <input {...other}
          checked={checked}
          className={fancyClass}
          type="checkbox"
        />
        {fancyTitle}
      </label>
    );
  }
});

注意:

顺序很重要,把 {...other} 放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是"checkbox"

剩余属性和展开属性 ...

剩余属性可以把对象剩下的属性提取到一个新的对象。会把所有在解构赋值中列出的属性剔除。

这是 JSX 命令行工具 配合 --harmony 标记来启用 ES7 语法。

使用 Underscore 来传递

如果不使用 JSX,可以使用一些库来实现相同效果。Underscore 提供 _.omit 来过滤属性,_.extend 复制属性到新的对象。

var FancyCheckbox = React.createClass({
  render: function() {
    var checked = this.props.checked;
    var other = _.omit(this.props, 'checked');
    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
    return (
      React.DOM.div(_.extend({}, other, { className: fancyClass }))
    );
  }
});

React 之props属性的更多相关文章

  1. React系列之--props属性

    版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...

  2. 组件的props属性和state状态

    props属性: 我使用代码来说明React中props属性: // Profile.jsx import React from 'react' ; export default Class Prof ...

  3. React(六)Props属性

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...

  4. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  5. React组件(组件属性this.state和this.props,css样式修饰组件)

    目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...

  6. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  7. React中props

    今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...

  8. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

  9. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

随机推荐

  1. java求素数

    按定义 即除了1和它本身以外不再被其他的除数整数 public static void main(String[] args) { for (int i = 2; i < 100; i++) { ...

  2. vim 基本命令入门

    简介 vim是Linux 系统下类似于Windows的记事本的编辑器. vim 中经常使用的三种模式 一般模式:浏览文件内容. 插入模式:编辑文件内容. 底行模式:进行保存编辑内容,退出等操作. 基本 ...

  3. Jupyter Notebook 添加目录

    1.  安装 jupyter_contrib_nbextensions pip install jupyter_contrib_nbextensions 2. 配置 nbextension jupyt ...

  4. CSDN博客投票活动开始了

    自己坚持写博客,一方面是为了将自己对知识点的理解做一个总结,另一方面也是因为自己看到了很多无私奉献分享自己知识的小伙伴们,因此自己也想像他们那样尽自己微薄之力把自己对某一知识点的理解分享给大家,或许算 ...

  5. [Gradle系列]Gradle打包apk多版本,多渠道,多环境,多功能,多模块随心所欲

    Tamic: http://blog.csdn.net/sk719887916/article/details/53411771 开始 上篇Gradle发布Module(Maven)到jcenter, ...

  6. RDO Stack: No valid host was found. There are not enough hosts available.

    Issue: When you launch an instance in Newton, you may find that the instance cannot be started due t ...

  7. 初识Spring Boot框架(二)之DIY一个Spring Boot的自动配置

    在上篇博客初识Spring Boot框架中我们初步见识了SpringBoot的方便之处,很多小伙伴可能也会好奇这个Spring Boot是怎么实现自动配置的,那么今天我就带小伙伴我们自己来实现一个简单 ...

  8. 安卓高级8 SurfaceView案例二 自定义相机

    效果:(由于不好录屏所以文字描述) 定一个SurfaceView 下方有几个按钮,点击确定可以拍照保存取消. 并且SurfaceView实时显示相机内容 package qianfeng.com.cu ...

  9. Dynamics CRM 导出系统中实体的属性字段到EXCEL

    我们在CRM中看元数据信息,可以通过SDK中的metadata browser的解决方案包,但该解决方案包只是在可视化上方便了,但如果我们需要在excel中整理系统的数据字典时这个解决方案包就派不上用 ...

  10. springMVC源码分析--HandlerMapping(一)

    HandlerMapping的工作就是为每个请求找到合适的请求找到一个处理器handler,其实现机制简单来说就是维持了一个url到Controller关系的Map结构,其提供的实际功能也是根据req ...