Question

给出以下React组件：

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

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

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

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

我能够通过从该文件导入sayGreeting并设置MyComponent的原型来实现：

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

但问题是“this”关键字，因此不会定义道具。我尝试使用this.sayGreeting = this.sayGreeting.bind(this)在构造函数中进行绑定，但它不起作用。

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

Answer 2

将this传递给该功能。

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

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

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

2 个答案: