生活随笔
收集整理的這篇文章主要介紹了
07、08 条件渲染、列表渲染
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
條件渲染
React沒(méi)有像v-if、v-show這樣的指令，需要使用JSX表達(dá)式組合而成
......state = {showLeft: false// showLeft: undefined, // 與運(yùn)算中效果同false// showLeft: null, // 與運(yùn)算中效果同false// showLeft: 0 // 在與運(yùn)算中會(huì)顯示// showLeft: Number(undefined) // 在與運(yùn)算中會(huì)顯示}
......{!this.state.showLeft && <Right />}
HTML中使用JSX
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> </script>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title>React 條件渲染</title>
</head><body><div id="app"></div><script type="text/babel">class Left extends React.Component {render() {return (<div>Left</div>)}}class Right extends React.Component {render() {return (<div>Right</div>)}}class Main extends React.Component {state = {showLeft: false// showLeft: undefined, // 與運(yùn)算中效果同false// showLeft: null, // 與運(yùn)算中效果同false// showLeft: 0 // 在與運(yùn)算中會(huì)顯示// showLeft: Number(undefined) // 在與運(yùn)算中會(huì)顯示}handleClick() {this.setState({showLeft: !this.state.showLeft})}render() {return (<div><h1>Main</h1><button onClick={this.handleClick.bind(this)}>{this.state.showLeft ? 'turn Right' : 'turn Left'}</button>{// 1. 三目運(yùn)算// this.state.showLeft ? <Left /> : <Right />}{// 2. 與運(yùn)算this.state.showLeft && <Left />}{!this.state.showLeft && <Right />}</div>)}}ReactDOM.render(<Main />,document.getElementById('app'))</script></body></html>
列表渲染 JSX → map
table相關(guān)warning
JSX中使用table，若未加tbody、thead會(huì)告警
key相關(guān)warning
Each child in a list should have a unique “key” prop.（列表中的每個(gè)子元素都必需有一個(gè)唯一的key屬性值） key是React確定元素是否改變的唯一標(biāo)識(shí)，key必需在兄弟節(jié)點(diǎn)中是唯一的 不建議使用index作為key值的情況
建立在列表順序改變、元素增刪的情況下：列表增刪或順序變了，index對(duì)應(yīng)項(xiàng)就會(huì)改變 若列表是靜態(tài)不可操作的，可以選擇index作為key值 用數(shù)據(jù)唯一的id作為key 動(dòng)態(tài)生成一個(gè)靜態(tài)id nanoid yarn add nanoid 每次render都會(huì)生成不同的id
import { nanoid
} from 'nanoid'
class MyTable extends React . Component
{ state
= { table
: [ { id
: 0 , name
: '漁' } , { id
: 1 , name
: '樵' } , { id
: 2 , name
: '耕' } , { id
: 3 , name
: '讀' } , ] } render ( ) { return ( < div
> < table border
= "1" > < thead
> < tr
> < th
> nanoid
< / th
> < th
> ID < / th
> < th
> 名字
< / th
> < / tr
> < / thead
> < tbody
> { this . state
. table
. map ( item
=> { const key
= nanoid ( ) return ( < tr key
= { key
} > < td
> { key
} < / td
> < td
> { item
. id
} < / td
> < td
> { item
. name
} < / td
> < / tr
> ) } ) } < / tbody
> < / table
> < / div
> ) }
}
ReactDOM
. render ( < MyTable
/ > , document
. getElementById ( 'app' )
)
key賦值的正確姿勢(shì)
注意：React明確規(guī)定，key不能作為屬性傳遞給子組件 ，必須顯示傳遞key值（使用別的屬性名，如sid） 防止開(kāi)發(fā)者在邏輯中對(duì)key值進(jìn)行操作 MyBody: key is not a prop. Trying to access it will result inundefinedbeing returned. If you need to access the same value within the child component, you should pass it as a different prop. import { nanoid
} from 'nanoid'
class MyTitle extends React . Component
{ render ( ) { return ( < thead
> < tr
> < th
> nanoid
< / th
> < th
> ID < / th
> < th
> 名字
< / th
> < / tr
> < / thead
> ) }
}
class MyBody extends React . Component
{ render ( ) { const { sid
, item
} = this . props
return ( < tr key
= { sid
} > < td
> { sid
} < / td
> < td
> { item
. id
} < / td
> < td
> { item
. name
} < / td
> < / tr
> ) }
}
class MyTable extends React . Component
{ state
= { table
: [ { id
: 0 , name
: '漁' } , { id
: 1 , name
: '樵' } , { id
: 2 , name
: '耕' } , { id
: 3 , name
: '讀' } , ] } render ( ) { return ( < div
> < table border
= "1" > < MyTitle
/ > < tbody
> { this . state
. table
. map ( item
=> { const key
= nanoid ( ) return ( < MyBody sid
= { key
} item
= { item
} key
= { key
} / > ) } ) } < / tbody
> < / table
> < / div
> ) }
}
ReactDOM
. render ( < MyTable
/ > , document
. getElementById ( 'app' )
)
總結(jié)
以上是生活随笔 為你收集整理的07、08 条件渲染、列表渲染 的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
