esj对象传播运算符在jsx of reactjs

时间:2016-12-30 01:39:09

标签: javascript reactjs ecmascript-6 react-jsx

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {         
    //for example this.props={from: "home", to: "about"}
    return <Link {...this.props} activeClassName="active"/> // ???what does the statement compile to es5?
  }
})

// modules/App.js
import NavLink from './NavLink'

// ...

<li><NavLink to="/home">Home</NavLink></li>

问题如下:

<Link {...this.props} activeClassName="active"/>,如果this.props = {to:&#34; / home&#34;,children:&#34; Home&#34;}?

2 个答案:

答案 0 :(得分:2)

Straight from the Babel homepage

React.createElement(Link, _extends({}, this.props, { activeClassName: "active" }));

我省略了_extends polyfill,如果可用,它基本上会解析为Object.assign

答案 1 :(得分:1)

<Link to="/home" children="Home" activeClassName="active"/>