Is it possible to implement an inheritance like mechanism for React components in order to reduce nearly duplicate code?

Question

I find that I am having to reimplement a lot of the same functionality. For example, with the next 3 components I am implementing the same code for style, className and id. I know that I can have {...props} as the argument instead hear, and then pass {...props} to the container inside the return function, but I am not able to do this if I want these components to each have their own classNames and styles that are always assigned to each instance of these classes. I looked into higher-order-components a bit, but couldn't wrap my head around how I would use them in this case

const styles = {
    container:{
        position: 'absolute'
    },
}

const Modal = ({className, style, id, hidden, children}) => {

    return (
        <div 
            className={`modal ${className}`}
            style={...{styles.container}, ...{style}}
            id={id}
        >
            {!hidden && <ExtraContent />}
            {children}
        </div>
    )
}

---

const styles = {
    container:{
        margin: 10
    }
}

const VoteButton = ({className, style, id, pressed}) => {
    let img
    if (pressed){
        img = './img_pressed.jpg'
    }else{
        img = './img_not_pressed.jpg'
    }
    return (
        <div
            className={`voteButton ${className}`}
            style={...{styles.container}, ...{style}}
            id={id}
        >
            <img src={img}>
        </div>
    )
}

---

const styles = {
    container:{
        display: 'flex'
    }
}

const Navbar = ({className, style, id, links, children, ...props}) => {
    return (
        <nav 
            {...props}
            className={`navbar ${className}`}
            style={...{styles.container}, ...{style}}
            id={id}
        >
            {links.map(lk => <a href={lk.href}>{lk.text}</a>
            {children}
        </nav>
    )
}

---

To be clear, I am looking for a way to avoid having to define and modify className, style and id for each component. It would be good if I could do this once. I understand this might be especially hard for the third component considering it's a nav instead of a div.

Answer 1

One approach would be to have a function that returns your component function:

function createComponentClass(Ele, name, styles, children) {
  return (props) => {
    const { className, style, id } = props;
    return (
      <Ele className={`${name} ${className}`} style={...{styles.container}, ...{style}} id={id}>
        {children(props)}
      </Ele>
    );
  };
}

const Modal = createComponentClass('div', 'modal', { container: { ... } }, (props) => {
  return (
    <>
      {!props.hidden && <ExtraContent />}
      {props.children}
    </>
  );
});

const VoteButton = createComponentClass('div', 'voteButton', { container: { ... } }, (props) => {
  let img = pressed ? './img_pressed.jpg' : './img_not_pressed.jpg';
  return <img src={img} />;
});

const Navbar = createComponentClass('nav', 'navbar', { container: { ... } }, (props) => {
  return (
    <>
      {links.map(lk => <a href={lk.href}>{lk.text}</a>
      {children}
    </>
  );
});