Можно ли определить метод ReactJS Mixin, который можно переопределить в компоненте React?

Библиотека Facebook ReactJS имеет строгие правила какие методы компонентов можно переопределить и как. Если это не разрешено , мы не можем переопределить метод.

Для моих собственных миксинов, как я могу обновить SpecPolicy, если у меня есть метод, который я хочу разрешить переопределить? Возможно ли это?

Этот пример немного изобретателен, но он должен получить точку. Скажем, у меня есть mixin ниже, который пытается предоставить метод renderItem по умолчанию, который должен быть переопределен, если необходимо. Когда я пытаюсь отобразить компонент <Hello ... />, я получаю ошибку Invariant Violation. Здесь вы можете найти jsfiddle.

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

Ответ 1

Это невозможно сейчас. Вероятно, в будущей версии React будут миксины, которые будут использовать классы ES6 и будут немного более гибкими. См. Здесь предложение:

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

Ответ 2

Вы можете просто использовать что-то вроде jQuery expand, чтобы расширить объект, который был передан React.createClass, вместо использования mixin - это позволит вы по-прежнему будете использовать Mixins, когда захотите, и используйте этот метод, когда вам нужно (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);

Ответ 3

Может быть, вы можете сделать что-то вроде этого, если вам по-прежнему нужна реализация 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>;
    }
});

Ответ 4

Смесин имеет доступ к свойствам и состоянию компонента. Вы можете иметь несколько реализаций в mixin и использовать нужный вам инструмент на основе свойств/состояния.

Единственное, что вы хотите, чтобы убедиться, что компоненты, использующие mixin, имеют эти свойства/состояние или имеют реализацию по умолчанию.

Ответ 5

В ситуации, когда мне нужно предоставить некоторые свойства mixin, это зависит от моего класса реакции, я делаю mixin как функцию с необходимыми аргументами, которые возвращают объект mixin

//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>