web-dev-qa-db-ja.com

ES6のchildContextTypes

ES6でオブジェクトchildContextTypesをどのように記述しますか？

var A = React.createClass({

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

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

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

とにかくBabelを使用しているので、次のようにコードでstatic（ES7）を使用できます。

export default class A extends React.Component {

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

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

  render() {
    return <B />
  }
}

詳細： ES6 +で反応

22
cutemachine

問題は、childContextTypesが「クラス」で定義される必要があることです。これは、staticが行うことです。したがって、これらの2つのソリューションは機能するようです。

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

これを試して：

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

0
Inessa Pokromkina

解決策は、「childContextTypes」をクラスから移動することでした。

クラス{。,};

childContextTypes（）{..}

または、ES7が静的プロパティを持つまで待ちます。

0
Chris G.