初入react -02

Posted SharkChilli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初入react -02相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

致初入职场的兄弟姐妹

初入ES6随笔

初入 python

初入云计算行业,可以考取哪些云计算证书?

初入MyBatis,简介

flask框架:初入