web-dev-qa-db-fra.com

childContextTypes dans ES6

Comment écririez-vous l'objet childContextTypes dans ES6?

var A = React.createClass({

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

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

    render: function() {
         return <B />;
    }
});
javascriptreactjsecmascript-6es2015
16
Chris G.

Puisque vous utilisez quand même Babel, vous pouvez utiliser static (ES7) dans votre code comme ceci:

export default class A extends React.Component {

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

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

  render() {
    return <B />
  }
}

Plus d'infos: React on ES6 +

22
cutemachine

Le problème est que childContextTypes doit être défini sur la "classe", ce que fait static. Donc, ces deux solutions semblent fonctionner:

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

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

Ou

class A extends React.Component {

}

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

essaye ça:

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

La forme du code source ici: React ES6 Context

0
Inessa Pokromkina

La solution consistait à déplacer les "childContextTypes" de la classe:

classe { . , };

childContextTypes () {..}

Ou attendez que ES7 ait des propriétés statiques.

0
Chris G.