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

Share Improve this question Follow asked Feb 15, 2017 at 2:32 nbkhopenbkhope 7,48444 gold badges4343 silver badges5959 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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)