puros - ¿Es posible definir un método ReactJS Mixin que se pueda anular en un componente React?

que es un componente en react native

Question

La biblioteca de Facebook ReactJS tiene reglas estrictas sobre qué métodos de componentes se pueden anular y cómo . A menos que esté específicamente permitido , no podemos redefinir un método.

Para mis mixins personalizados, ¿cómo puedo actualizar SpecPolicy si tengo un método que quiero permitir que se anule? ¿Es esto posible?

Este ejemplo es un poco artificial, pero debería ser claro. Digamos que tengo la mezcla debajo que intenta proporcionar un método de renderItem predeterminado, que se pretende que se anule si es necesario. Cuando intento representar el componente <Hello ... /> , Invariant Violation un error de Invariant Violation . Puedes encontrar un jsfiddle aquí .

var MyMixin = {
    render: function () {
        return this.renderItem();
    },
    renderItem: function () {
        return <div>Hello {this.props.name}</div>;
    }
};

var Hello = React.createClass({
    mixins: [MyMixin],
    renderItem: function() {
        return <div>Hey {this.props.name}</div>;
    }
});

Answer 1

El mixin tiene acceso a las propiedades y estado del componente. Puede tener varias implementaciones en la mezcla y usar el implemento que necesita en función de las propiedades / estado.

Lo único que quiere es asegurarse de que los componentes que usan la mezcla tengan estas propiedades / estado o tengan una implementación predeterminada.

Answer 2

En la situación, cuando necesito proporcionar algunas propiedades a la mezcla, eso depende de mi clase de reacción, hago la mezcla como una función con los argumentos necesarios, que devuelven el objeto de la mezcla

//mixin.js
module.exports = function mixin(name){
  return {
    renderItem(){
      return <span>name</span>
    }
  };
}

//react-class.js
var myMixin = require(''mixin'');
module.exports = React.createClass({
    mixins:[myMixin(''test'')],
    render(){
        return this.renderItem();
    }
});
//result
<span>test</test>

Answer 3

Esto no es posible en este momento. Es probable que una versión futura de React tenga mixins que aprovechen las clases de ES6 y sea un poco más flexible. Vea aquí para una propuesta:

https://github.com/reactjs/react-future/blob/master/01%20-%20Core/02%20-%20Mixins.js

Answer 4

Puede usar algo como jQuery extendido para extender el objeto que se pasa a React.createClass , en lugar de usar un mixin. Esto le permitirá seguir usando Mixins cuando lo desee, y usar este método cuando lo necesite ( JS Fiddle ):

/** @jsx React.DOM */

var MyMixin = {
    render: function () {
        return this.renderItem();
    },
    renderItem: function () {
        return <div>Hello {this.props.name}</div>;
    }
};

var Hello = React.createClass($.extend(MyMixin, {
    renderItem: function() {
        return <div>Hey {this.props.name}</div>;
    }
}));

React.renderComponent(<Hello name="World" />, document.body);

Answer 5

Quizás pueda hacer algo como esto si aún desea una implementación predeterminada de rednerItem:

var MyMixin = {
  render: function () {
    return this.renderItem();
  },
  renderItem: function () {
    var customRender = this.customRenderItem;
    return customRender != undefined ? customRender() : <div>Hello {this.props.name}</div>;
  }
};

var Hello = React.createClass({
    mixins: [MyMixin],
    customRenderItem: function() {
      return <div>Hey {this.props.name}</div>;
    }
});