1、字符串字面量。

<MyComponent>Hello world!</MyComponent>

这是一个合法的 JSX，MyComponent 中的 props.children 是一个简单的未转义字符串 "Hello world!"。因此你可以采用编写 HTML 的方式来编写 JSX。如下所示：

<div>This is valid HTML &amp; JSX at the same time.</div>

2、JSX子元素。

子元素允许由多个 JSX 元素组成。这对于嵌套组件非常有用：

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

你可以将不同类型的子元素混合在一起，因此你可以将字符串字面量与 JSX 子元素一起使用。这也是 JSX 类似 HTML 的一种表现，所以如下代码是合法的 JSX 并且也是合法的 HTML：

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

React 组件也能够返回存储在数组中的一组元素：

render() {
  // 不需要用额外的元素包裹列表元素！
  return [
    // 不要忘记设置 key :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

3、JavaScript表达式作为子元素。
JavaScript 表达式可以被包裹在 {} 中作为子元素。例如，以下表达式是等价的：

<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>

这对于展示任意长度的列表非常有用。例如，渲染 HTML 列表：

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
      <ul>
        {todos.map((message) => <Item key={message} message={message} />)}
      </ul>
  );
}

JavaScript 表达式也可以和其他类型的子元素组合。这种做法可以方便地替代模板字符串：

function Hello(props) {
  return <div>Hello {props.addressee}!</div>;
}

4、函数作为子元素。

通常，JSX 中的 JavaScript 表达式将会被计算为字符串、React 元素或者是列表。不过，props.children 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可渲染类型。例如，如果你有一个自定义组件，你可以把回调函数作为 props.children 进行传递：

// 调用子元素回调 numTimes 次，来重复生成组件
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>
  );
}

5、布尔类型、null和undefined会被忽略。
false, null, undefined, and true 是合法的子元素。但它们并不会被渲染。以下的 JSX 表达式渲染结果相同。

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

确保 && 之前的表达式总是布尔值：

<div>
  {props.messages.length > 0 &&
  <MessageList messages={props.messages} />
  }
</div>