Question

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

例如：

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

我知道我可以使用不属于组件类的辅助函数来完成此操作。但我想用我的组件函数来节省空间，并清理我的代码。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: