Question

How to implement "specialization" in React, i.e. components that are "special cases" of other components, like a WelcomeDialog as a special case of Dialog?

#react

Answer

In React, this is also achieved by *composition*, where a more "specific" component renders a more "generic" one and configures it with props:

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}
function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!"
    />
  );
}

https://reactjs.org/docs/composition-vs-inheritance.html#specialization

Learn

Author

xavi

Reviews
Last
next

Students 1