Question

在使用ES6课程时，我正在寻找React mixins的替代方案。

我想在我的react组件中注入一些函数，但这些函数需要React元素。

React ES5使用了mixin，但React Classes不支持mixins。 React类中mixins的替代方法是什么？

Answer 1

Mixins won't be supported by React in the future。而不是它们，你应该使用高阶组件。这个gist为这个概念提供了很好的解释。

您应该创建一个单独的功能，而不是将额外的功能混合到您的组件中，而这将为其他组件提供此功能。

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

export default extraFunctionality(MyComponent);

如果你正在使用带有ES7插件的Babel，你可以使用装饰器语法：

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

Answer 2

您可以使用匿名函数在React.Component类周围包装一个或多个类以添加额外的功能：

首先使用extras创建包装类：

<强> 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];
  }
};

现在创建一个通常的组件，使用 extras-class 扩展React.Component以注入额外的功能：

<强> 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-class 通过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模块必须导出一个带有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

这对我有用，可能会有更多的安全防护，但这个概念就在那里。优点是您可以从原始组件访问mixin提供的功能，这是使用装饰器或高阶组件无法实现的：

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)

反应混合的ES6替代品

4 个答案: