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: