首页 > 其他 > 详细

初入react -02

时间:2018-01-31 19:16:33      阅读:232      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/SharkChilli/p/8393686.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!