React ES6 Alternative for Mixins

Question

I am looking for an alternative to React mixins when using ES6 classes.

I would like to add some functions to my reactive components, but these functions need React elements.

Respond to ES5 mixins used for this, but React Classes do not support mixins. What is the alternative to mixins in React classes?

Answer 1

Mixins will not be supported by React in the future . Instead, you should use higher order components. This gist gives a great explanation of this concept.

, , , .

class MyComponent extends React.component {
    render() {
        //...
    }
}

export default extraFunctionality(MyComponent);

Babel ES7, :

@extraFunctionality
class MyComponent extends React.component {
    render() {
        //...
    }
}

Answer 2

React.Component :

:

compExtras.jsx

export default superClass => class extends superClass {

  constructor(props) {  // take props from 'MyComp'.
    super(props);
    this.foo = 'some value';
    this.someChildProp = props.bar; // You can use props of 'MyComp'.
  }

  someExtraMethod(x) {
    return [x, this.foo, this.childProp];
  }
};

, React.Component extras, :

myComp.jsx

import extras from './compExtras.js';

class MyComp extends extras(React.Component) {  // extend 'React.Component' with 'extras'

  constructor(props) {
    super(props);  // Pass props to the 'extras' class.
    this.qux = 'some value';
  }

  render() {
    console.log(this.someExtraMethod('foo'));  // You have access to that method.
    return <div></div>;
  }
}

, :

class MyComp extends extrasOne(extrasTwo(React.Component)) {

, extras props super(props), props.

Answer 3

, MyComponent, JS, , , :

var MyMixin = require('whatever/path');
class MyComponent extends React.Component{
    constructor(props){
        super(props);
        MyMixin.call(this); //this line adds the methods
        this.state = {message: 'Hello world'};
    }
    render(){
        return (
            <div>{this.state.message}</div>
        );
    }
}

Mixin

module.exports = function(){
    var self = this;
    this.method1 = function(){
        // do stuff
        self.setState({
            message: "hello again"
        });
    }
    this.method2 = function(){
        // do more stuff
    }
}

Answer 4

It works for me, there may be more guards, but there is a concept. The advantage is that you can access the functions provided by mixin from the source component, which is not possible with decorators or high-order components:

var MixinComposer = (ComposedComponent, Mixin) => class extends React.Component {
    constructor(props) {
        super(props);
        Object.getOwnPropertyNames(Mixin.prototype).forEach((func) => {
            if (func != 'constructor')
            ComposedComponent.prototype[func] = Mixin.prototype[func]
        })
        this.composed = <ComposedComponent {...this.props} {...this.state}/>
    }
    render() {
        return this.composed;
    }
}

const FooMixin = class {
    foo() { return "foo" }
}

const MyComponent = MixinComposer(class extends React.Component {
    render() {
        return (<div>{ this.foo() }</div>)
    }
}, FooMixin)