This is the 24th day of my participation in Gwen Challenge

Official recommendation: Use composition rather than inheritance for code reuse across code.

Contains the relationship

Some components do not know the contents of their children in advance, and it is recommended that children be passed into the render result through a Children Prop.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-'+props.color} >
      {props.children}
    </div>
  );
}
Copy the code
  • Other components pass any component as a child to the component we defined above
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}
Copy the code

Interpretation of the

Everything in the <FancyBorder> JSX tag is passed to the FancyBorder component as a children Prop.

  • Sometimes children Prop may not be used, as in the case below
function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />} / >
  );
}
Copy the code

Interpretation of the

The example above illustrates the idea that components can also be passed as props in React because components are objects in nature.

Special relationship

  • Sometimes some components are special instances of other components, as in the following example
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!" />
  );
}
Copy the code
  • Composition also applies to class components
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ' '};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, The ${this.state.login}! `); }}Copy the code

Interpretation of the

The children property of the Dialog in the example above is highlighted in red below:

Let’s talk about inheritance

In many practices, officials have found no need to use inheritance to build component hierarchies. Props and composition provide a flexible way to clearly and safely customize the look and behavior of components.

Note: Components can accept any props, including basic data types, React elements, and functions. If you want to reuse non-UI functionality between components, we recommend extracting it as a separate JavaScript module, such as a function, object, or class. Components can be imported directly without having to extend them.

Interpretation of the

React hardly requires inheritance. You just need to learn how to use combinations flexibly, and the props property can accept almost any data type. See the description for details.

Learn React!