if 語句和 for 循環在 JavaScript 中不是表達式，因此它們不能直接在 JSX 中使用，所以你可以將它們放在周圍的代碼中（return裏不能出現for if，在render內 return前for if）

function NumberDescriber(props) {
  let description;
  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  
 
return <div>{props.number} is an {description} number</div>;
}

你可以通過子代嵌入更多的 JSX 元素，這對於嵌套顯示組件非常有用：（每個組件狀態都是獨立的話，可以嵌套。如果每個組件之間需要共享狀態，就要組合）

// 嵌套
<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

// 組合
render(){
    return (
        <div>
            <SearchBar
                filterText={this.state.filterText}
                inStockOnly={this.state.inStockOnly}
                onFilterTextInput={this.handleFilterTextInput}
                onInStockInput={this.handleInStockInput}
            />
            <ProductTable
                products={this.props.products}
                filterText={this.state.filterText}
                inStockOnly={this.state.inStockOnly}
            />
        </div>
    );
}

初入react -02