javascript - childContextTypes en ES6

reactjs ecmascript-6

Question

¿Cómo escribirías el objeto childContextTypes en ES6?

var A = React.createClass({

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

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

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

Answer 1

La solución fue mover "childContextTypes" fuera de la clase:

clase { .,, };

childContextTypes () {..}

O espere a que ES7 tenga propiedades estáticas.

Answer 2

El problema es que childContextTypes debe definirse en la "clase", que es lo que hace static . Entonces estas dos soluciones parecen funcionar:

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

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

O

class A extends React.Component {

}

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

Answer 3

Ya que está usando Babel de todos modos, puede usar static (ES7) en su código de esta manera:

export default class A extends React.Component {

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

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

  render() {
    return <B />
  }
}

Más información: reacciona en ES6 +

Answer 4

prueba esto:

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>;
  }
}

Formulario de código fuente aquí: React ES6 Context

Answer 5

Si está utilizando Coffeescript ...

cambio

childContextTypes:

a

@childContextTypes: