公开React组件功能

Question

基于最佳实践公开某些反应组件功能的正确选项是什么。

选项1

在组件外部创建函数，如：

export const someFunction = () => { //do something }

class MyComponent extends Component {}

export default MyComponent;

使用上面的组件：

import MyComponent, { someFunction } from './components/myAwesomeComponent';  

class ChildComponent extends Component {
    parentComponentFunction() {
       someFunction();
    }

    render() {
        <div>
            <MyComponent />
        </div>
    }
}

选项2

在组件的内部（通用方式）创建函数，如：

class MyComponent extends Component {
    someFunction() {
     // 
    }
 }

export default MyComponent;

使用上面的组件：

import MyComponent frrom './components/myAwesomeComponent';  

class ChildComponent extends Component {

    parentComponentFunction() {
          this.refs.parentComponent.someFunction();
    }

    render() {
       <div>
         <MyComponent ref="parentComponent" />
       </div>
    }

}

选项3

不知道它是否存在

它是否有意义或者你需要一个更好的例子吗？

Answer 1

如果someFunction需要引用this，请将其定义为成员函数。否则，要么将其保留为单独的实用程序函数，要么将其声明为类中的静态函数（选项3）：

class MyComponent extends Component {

    // ...

    static someFunction() {
      // ...
    }
}

// usage: MyComponent.someFunction()

还有一个ESLint规则应该控制它：class-methods-use-this