childContextTypes in ES6

Question

How would you write the object childContextTypes in ES6?

var A = React.createClass({

    childContextTypes: {
         name: React.PropTypes.string.isRequired
    },

    getChildContext: function() {
         return { name: "Jonas" };
    },

    render: function() {
         return <B />;
    }
});

Solution 1

Since you are using Babel anyway, you can use static (ES7) in your code like this:

export default class A extends React.Component {

  static childContextTypes = {
    name: React.PropTypes.string,
  }

  getChildContext() {
    return { name: "Jonas" }
  }

  render() {
    return <B />
  }
}

More info: React on ES6+

Solution 2

The issue is that childContextTypes needs to be defined on the "class", which is what static does. So these two solutions seem to work:

class A extends React.Component {
  constructor() {
    super(...arguments);

    this.constructor.childContextTypes = {
      name: React.PropTypes.string.isRequired
    };
  }
}

Or

class A extends React.Component {

}

A.childContextTypes = {
  name: React.PropTypes.string.isRequired
};

Comments

[Bergi]

Does this help? Not sure if it's a duplicate

[Jacob Davis-Hansson]

The more-info blog page has moved to babeljs.io/blog/2015/06/07/react-on-es6-plus

[cutemachine]

Thank you jakewins. Updated the link accordingly.

[John Xiao]

There is a syntax error at getUser: () => ({ name: 'Bob' })