初入react -02

Posted 2020-10-22 SharkChilli

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>
    );
}