reactjs 的 jsx 中的 es6 对象扩展运算符

Question

// 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"/>,语句编译成es5,if this.props={to: "/home", children: "Home"}?

Answer 1

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

Answer 2

Straight from the Babel homepage:

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

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

reactjs 的 jsx 中的 es6 对象扩展运算符

es6 object spread operator in jsx of reactjs

javascript

ecmascript-6

reactjs

react-jsx