React - Children Element

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - About

When you create a component, you pass children element that will build the React DOM tree.

Even if you can use the createElement function to create a element, nobody does that. The syntax below is only a JSX one.

Related: See also React - Layout

Advertising

3 - Management

3.1 - Component Relationship

Components can refer to other components in their output.

  • This function calls the React components many times. Components must return a single root element. This is the why of the <div> (to contains all the Welcome elements).
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
  • Same component as above
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • The Render function gets the App function as input argument
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
  • The standard div root element placeholder
<div id="root"></div>

3.2 - Passing children components via props

Components can be passed:

Advertising

3.2.1 - props.children

props.children pass all Children Components.

Some components don't know their children ahead of time.

This is especially common for components that represent generic “boxes” like:

Such components must use the special children prop to pass children elements directly into their output.

  • The container component
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
  • The parent component using the generic container
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}
  • The common and well known rendering and HTML code
ReactDOM.render(
  <WelcomeDialog />,
  document.getElementById('root')
);
<div id="root"></div>

Advertising

3.2.2 - named props properties

Passing specific Children Component as parameter

The below example shows how to create a two panes components and to fill it with two children components.

  • The container component with two regions
function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}
  • The CSS for the two regions
.SplitPane {
  width: 100%;
  height: 100px;
}
 
.SplitPane-left {
  float: left;
  width: 30%;
  height: 100%;
}
 
.SplitPane-right {
  float: left;
  width: 70%;
  height: 100%;
}
  • The component going to the left and right region.
// A left compo
function Left() {
  return <div className="Left" />;
}
 
// A Right compo
function Right() {
  return <div className="Right" />;
}
  • The css of each compo:
.Left {
  width: 100%;
  height: 100%; 
  background: lightblue;
}
 
.Right {
  width: 100%;
  height: 100%; 
  background: pink;
}
  • The Main component calling the container with two regions
function App() {
  return (
    <SplitPane
      left={
        <Left />
      }
      right={
        <Right />
      } />
  );
}
  • The classic render and HTML code for rendering
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
<div id="root"></div>

3.3 - Child Modification

Parent components modify can modify a child:

  • by re-render it with new props.
  • or with ref (for instance of React component, or DOM element)

3.4 - Requiring Single Child

With PropTypes.element of the prop-type library, you can specify that only a single child can be passed to a component as children.

import PropTypes from 'prop-types';
 
class MyComponent extends React.Component {
  render() {
    // This must be exactly one element or it will warn.
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}
 
MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

4 - Documentation / Reference

web/javascript/react/children.txt · Last modified: 2019/06/21 09:40 by gerardnico