将 React Class 函数存储在单独的文件中

Question

有没有办法将 React class 的函数存储在单独的文件中，然后导入这些函数以供使用？想要这样做的原因纯粹是为了减少我的组件的大小并按类别对功能进行分组。

例如：

import functionIWantToImport from '../functions/functionIWantToImport';
import anotherFunction from '../functions/anotherFunction';

Class Test extends React.Component {
   constructor(props){
       super(props);

       this.state = {};
   }

   //and then include the functions like below:
   functionIWantToImport;
   anotherFunction;
}

我知道我可以使用不属于组件 class 的辅助函数来完成此操作。但是我想用我的组件函数来保存 space，并清理我的代码。

Answer 1

使用标准的 JS 函数（不是箭头函数），并在构造函数中将函数绑定到实例：

function externalMethod() { // simulates imported function
  return this.state.example;
}

class Test extends React.Component {
   constructor(props){
       super(props);

       this.state = { example: 'example' };
       
       this.externalMethod = externalMethod.bind(this);
   }

   render() {    
    return (
      <div>{ this.externalMethod() }</div>
    );
   }
}

ReactDOM.render(
  <Test />,
  test
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test"></div>

将 React Class 函数存储在单独的文件中

Storing React Class functions in separate files

import

components

class

code-cleanup

reactjs