JSX 中的孩子們

在包含開始標記和結束標記的 JSX 表示式中，這些標記之間的內容作為特殊 prop：props.children 傳遞。通過孩子有幾種不同的方法：

字串文字

你可以在開始和結束標籤之間放一個字串，props.children 就是那個字串。這對許多內建 HTML 元素很有用。例如：

<MyComponent>
    <h1>Hello world!</h1>
</MyComponent>

這是有效的 JSX，MyComponent 中的 props.children 只是 <h1>Hello world!</h1>。

請注意， HTML 未轉義，因此你通常可以像編寫 HTML 一樣編寫 JSX。

請記住，在這種情況下 JSX：

• 刪除行開頭和結尾的空格;
• 刪除空白行;
• 刪除與標籤相鄰的新行;
• 在字串文字中間出現的新行被壓縮到一個空格中。

JSX 兒童

你可以提供更多 JSX 元素作為子項。這對於顯示巢狀元件很有用：

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

你可以將不同型別的子項混合在一起，因此你可以將字串文字與 JSX 子項一起使用。這是 JSX 與 HTML 類似的另一種方式，因此這是有效的 JSX 和有效的 HTML：

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

請注意，React 元件不能返回多個 React 元素，但單個 JSX 表示式可以有多個子元素。因此，如果你希望元件呈現多個內容，你可以將它們包裝在 div 中，如上例所示。

JavaScript 表示式

你可以將任何 JavaScript 表示式作為子項傳遞，方法是將其包含在 {} 中。例如，這些表示式是等效的：

<MyComponent>foo</MyComponent>

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

這通常用於呈現任意長度的 JSX 表示式列表。例如，這會呈現一個 HTML 列表：

const Item = ({ message }) => (
  <li>{ message }</li>
);

const TodoList = () => {
  const todos = ['finish doc', 'submit review', 'wait stackoverflow review'];
  return (
    <ul>
      { todos.map(message => (<Item key={message} message={message} />)) }
    </ul>
  );
};

請注意，JavaScript 表示式可以與其他型別的子項混合使用。

作為兒童的功能

通常，在 JSX 中插入的 JavaScript 表示式將計算為字串，React 元素或這些事物的列表。然而，props.children 就像任何其他道具一樣，它可以傳遞任何型別的資料，而不僅僅是 React 知道如何渲染的型別。例如，如果你有自定義元件，則可以將其作為 props.children 進行回撥：

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

// Calls the children callback numTimes to produce a repeated component
const Repeat = ({ numTimes, children }) => {
  let items = [];
  for (let i = 0; i < numTimes; i++) {
    items.push(children(i));
  }
  return <div>{items}</div>;
};

傳遞給自定義元件的子代可以是任何東西，只要該元件將它們轉換為 React 在渲染之前可以理解的內容。這種用法並不常見，但如果你想擴充套件 JSX 的功能，它就有用了。

忽略的值

請注意，false，null，undefined 和 true 是有效的孩子。但他們根本就沒有渲染。這些 JSX 表示式將呈現相同的東西：

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

這對於有條件地呈現 React 元素非常有用。這個 JSX 只渲染 if showHeader 為真：

<div>
  {showHeader && <Header />}
  <Content />
</div>

一個重要的警告是，一些假的值，例如 0 號，仍然由 React 呈現。例如，此程式碼的行為不會像你預期的那樣，因為當 props.messages 為空陣列時將列印 0：

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

解決此問題的一種方法是確保 && 之前的表示式始終為 boolean：

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

最後，請記住，如果你希望輸出中出現 false，true，null 或 undefined 等值，則必須先將其轉換為字串：

<div>
  My JavaScript variable is {String(myVariable)}.
</div>