Given the following React ponent:

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

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

greeting is passed via props and is just a string message. Given sayGreeting() might be used in multiple ponents, with the exact same definition, would it be possible to extract it into a file (see the following code) and then somehow include it in each ponent as needed. This is like the include module (or mixin?) pattern in programming languages like Ruby.

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

I was able to do it by importing sayGreeting from that file and setting the prototype of MyComponent as such:

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

But the issue is the "this" keyword, so props will not be defined. I tried binding in the constructor using this.sayGreeting = this.sayGreeting.bind(this), but it didn't work.

Given the following React ponent:

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

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

greeting is passed via props and is just a string message. Given sayGreeting() might be used in multiple ponents, with the exact same definition, would it be possible to extract it into a file (see the following code) and then somehow include it in each ponent as needed. This is like the include module (or mixin?) pattern in programming languages like Ruby.

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

I was able to do it by importing sayGreeting from that file and setting the prototype of MyComponent as such:

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

But the issue is the "this" keyword, so props will not be defined. I tried binding in the constructor using this.sayGreeting = this.sayGreeting.bind(this), but it didn't work.

• javascript
• class
• reactjs
• refactoring
• dry

• You could always pass props, like <div>{this.sayGreeting(props)}</div> – Jordan Bonitatis Commented Feb 15, 2017 at 3:45

2 Answers 2

You can use a higher-order ponent:

const myHOC = (posedComponent) => { 
  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);

Pass this into the function.

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

Then to use after importing: sayGreeting(this)