React

Children in JSX

In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: props.children. There are several different ways to pass children:

The JSX expression contains the start tag and the end tag, and the content between the two tags is treated as a special prop “props. Children “. There are N different ways to pass children:

String Literals

You can put a string between the opening and closing tags and props.children will just be that string. This is useful for many of the built-in HTML elements. For example:

<MyComponent>Hello world! </MyComponent>Copy the code

JSX Children

You can provide more JSX elements as the children. This is useful for displaying nested components:

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>
Copy the code

JavaScript Expressions as Children

You can pass any JavaScript expression as children, by enclosing it within {}. For example, these expressions are equivalent:

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>
Copy the code

Functions as Children

Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, props.children works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, You could have it take a callback as props. Children: Normally, Javascript expressions passed into JSX will be treated as strings, a React element, or lists. But props. Children, like any prop, can pass any kind of data, except that React knows how to render. For example, if you have a custom component, you can use it as a callback as props. Children

function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}
Copy the code

Booleans, Null, and Undefined Are Ignored

false, null, undefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>
Copy the code

How do I pass multiple slots

React slot is a prop. When multiple slots need to be passed, use prop

< MyDialog left = {< div > left < / div >} > < div > - < / div > < / MyDialog > / / using the < div > < div className="left">left{this.props.left}</div> {this.props.children} </div>Copy the code