es6 object spread operator in jsx of reactjs

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>

The quesion is below:

<Link {...this.props} activeClassName="active"/>, what does the statement compile to es5, if this.props={to: "/home", children: "Home"}?

You can find out yourself: babeljs.io/repl .

Felix Kling
– Felix Kling

2016-12-30 01:44:19 +00:00
Commented Dec 30, 2016 at 1:44 — Felix Kling
– Felix Kling, Commented Dec 30, 2016 at 1:44

Felix Kling · Accepted Answer · 2016-12-30 01:45:54Z

2

Straight from the Babel homepage:

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

I omitted the _extends polyfill, it basically resolves to Object.assign if it is available.

edited Dec 30, 2016 at 1:45

answered Dec 30, 2016 at 1:43

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

guest271314 Over a year ago

Is there an existing polyfill for object spread that you are aware of other than using the babel library?

Felix Kling Over a year ago

Anything that serves as polyfill for Object.assign. Object spread is nothing but merging objects.

guest271314 Over a year ago

Perhaps worded previous comment inadequately. Meant using spread or rest element syntax within a plain object, without using babel.

Felix Kling Over a year ago

Oh I see. You have to use a transpiler for converting syntax features. I guess Babel is the most popular one these days. I don't really know or use any others.

Felix Kling Over a year ago

Both object rest (var {foo, ...bar} = object;) and spread ({foo: 42, ...obj}) are part of the same proposal: github.com/sebmarkbage/ecmascript-rest-spread . " Can only certain portions of babel by extracted and utilized?" Yes, by default Babel does nothing. You have to enable the features you want to use. See babeljs.io/docs/plugins .

|

Jack · Accepted Answer · 2016-12-30 01:40:26Z

1

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

answered Dec 30, 2016 at 1:40

Jack

21.3k12 gold badges51 silver badges48 bronze badges

Collectives™ on Stack Overflow

es6 object spread operator in jsx of reactjs

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related