childContextTypes в ES6

Question

Как бы вы написали объект childContextTypes в ES6?

var A = React.createClass({

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

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

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

Answer 1

Так как вы все равно используете Babel, вы можете использовать static (ES7) в вашем коде так:

export default class A extends React.Component {

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

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

  render() {
    return <B />
  }
}

Больше информации: Реагируйте на ES6+

Answer 2

Проблема в том, что childContextTypes должно быть определено на "классе", который является то, что static делает. Таким образом, эти два решения, кажется, работают:

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

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

Или же

class A extends React.Component {

}

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

Answer 3

Попробуй это:

import React, { PropTypes } from 'react';

export default class Grandparent extends React.Component {
  static childContextTypes = {
    getUser: PropTypes.func
  };

   getChildContext() {
    return {
      getUser: () => ({ name: 'Bob' })
    };
  }

  render() {
    return <Parent />;
  }
}

class Parent extends React.Component  {
  render() {
    return <Child />;
  }
}

class Child extends React.Component {
  static contextTypes = {
    getUser: PropTypes.func.isRequired
  };

  render() {
    const user = this.context.getUser();
    return <p>Hello {user.name}!</p>;
  }
}

Форма исходного кода здесь: React ES6 Context

Answer 4

Решение состояло в том, чтобы переместить "childContextTypes" из класса:

учебный класс {.,, };

childContextTypes () {..}

Или подождите, пока ES7 не получит статические свойства.

Answer 5

Если вы используете Coffeescript...

менять

childContextTypes:

в

@childContextTypes: