你可以在 React 组件类中添加一个外部函数作为方法吗？答案

【问题标题】：Can you add an external function as a method in a React component class?你可以在 React 组件类中添加一个外部函数作为方法吗？
【发布时间】：2017-07-03 13:02:55
【问题描述】：

给定以下 React 组件：

class MyComponent extends Component {
  sayGreeting = () => {
    return this.props.greeting;
  }

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

greeting 通过 props 传递，只是一个字符串消息。鉴于 sayGreeting() 可能在多个组件中使用，具有完全相同的定义，是否可以将其提取到文件中（参见以下代码），然后根据需要以某种方式将其包含在每个组件中。这就像 Ruby 等编程语言中的包含模块（或 mixin？）模式。

export const sayGreeting = () => {
  return this.props.greeting;
};

我可以通过从该文件导入 sayGreeting 并设置 MyComponent 的原型来做到这一点：

import { sayGreeting } from './someFile';
// ...
MyComponent.prototype.sayGreeting = sayGreeting;

但问题在于“this”关键字，因此不会定义 props。我尝试使用this.sayGreeting = this.sayGreeting.bind(this)在构造函数中绑定，但没有成功。

【问题讨论】：

你总是可以通过props，比如<div>{this.sayGreeting(props)}</div>

标签： javascript class reactjs refactoring dry

【解决方案1】：

您可以使用higher-order component：

const myHOC = (composedComponent) => { 
  return class extends React.Component {
    sayGreeting = () => {
      return this.props.greeting;
    }

    render() {
      return <ComposedComponent sayGreeting={ this.sayGreeting } />;
    }
  };
};

class MyComponent extends React.Component {
   render() {
      return <div>{this.props.sayGreeting()}</div>
   }
}

export default MyHOC(MyComponent);

【讨论】：

【解决方案2】：

将this 传递给函数。

export const sayGreeting = ({props}) => {
  return props.greeting;
};

然后导入后使用： sayGreeting(this)

【讨论】：