レンダリング条件
条件演算子は、それらに応じてUIを更新するように反応させ、次いで、現在の状態を表す要素を作成する場合、同じ条件がレンダリングやJavaScript、使用JavaScriptまたはオペレータに反応します。
以下の特定の実装例を見ることができます
。1. > [コンポーネント- SRCフォルダ、そして新しいlist.js:次のように、特定のコードを
import React, { Component } from 'react';
class List extends Component {
// 状态的初始化一般放在构造器中
constructor(props){
super(props);
this.state = {
goods: [
{id: 1,text: '条件渲染'},
{id: 2,text: '循环渲染'}
],
}
}
render() {
return (
<div>
{/* 条件渲染 */}
{ this.props.title && <h1>{this.props.title}</h1> } {/* 短路逻辑 */}
{/* 列表渲染 */}
<ul>
{this.state.goods.map( good => <li key={good.id}>{good.text}</li> )}
</ul>
</div>
);
}
}
export default List;
2.次にSRC - > index.jsインポートコンポーネント、再利用、特定のコードは次のように
import React from 'react';
import List from './component/List'
function App() {
return (
<div>
{/* 条件渲染与循环 */}
<List title="条件渲染与循环Demo"></List>
</div>
);
}
export default App;