javascript - 处理外部函数导入

Question

这可能是一个关于如何处理外部函数的导入和导出函数的相当普遍的问题。

所以我有一个这样的组件:

import React, {Component} from "react";
import {handleChange} from "./path";
//imports from different files...

class Foo extends Component {
    constructor(props) {
        super(props);

        this.bindFunctions();

        this.state = {...};
    };

    //Arrow functions to bind them
    alreadyBound = () => {};

    render() {
        return (
            <div>
                Some text
            </div>
        );
    }

    bindFunctions = () => {
        this.handleChange = handleChange.bind(this);
        //dozens of functions to follow...
    }
}

export default compose(
    translate('translations'),
    connect()
)(Foo);

这就是我的外部函数的样子(它们不是组件的一部分，只是具有要在各种组件中重用的函数的文件):

export function handleChange(value, {target: {name, type}}) {
    this.setState({[name]: value});
}

现在这工作得很好，但令人作呕。我的文件越来越大，总是绑定(bind)这些功能很痛苦。我知道导入函数/组件的必要性，但我真的必须以这种方式绑定(bind)它们吗？像 arrow 函数这样的东西会很简洁，并且会节省我很多多余的输入。提前致谢!

Answer 1

可以像这样一次导入多个方法:

import * as path from  "./path";

class Foo { }

然后我们可以将它们分配为静态方法:

Object.assign( Foo, path );

或作为原型(prototype)方法:

Object.assign( Foo.prototype, path );

如果你想绑定(bind)上下文就有点困难了。这可以在构造函数中完成:

import * as path from  "./path";

class Foo { 
  constructor(){
    for(var key in path) this[key] = path[key].bind(this);
  }
  //...
}

或者如果您只想绑定(bind)一些函数(可能更快):

import * as path from  "./path";

class Foo { 
  constructor(){
    const bind = ["onClick","onResize" /* whatever*/];
    for(var key of bind) this[key] = this[key].bind(this);
  }
}

Object.assign(Foo, path.prototype);