还有用的网站,锡林浩特市长安网站 建设初步方案,龙岗网站维护,wordpress域名网站搬家条件渲染 React没有像v-if、v-show这样的指令#xff0c;需要使用JSX表达式组合而成 // 与运算 三目 // 判断表达式一定是false/null/undefined时才不会被渲染#xff0c;0、空字符串、NaN会显示 // 如果render函数返回null#xff0c;不会进行任何渲染 ......state {showL…条件渲染 React没有像v-if、v-show这样的指令需要使用JSX表达式组合而成 // 与运算 三目 // 判断表达式一定是false/null/undefined时才不会被渲染0、空字符串、NaN会显示 // 如果render函数返回null不会进行任何渲染 ......state {showLeft: false// showLeft: undefined, // 与运算中效果同false// showLeft: null, // 与运算中效果同false// showLeft: 0 // 在与运算中会显示// showLeft: Number(undefined) // 在与运算中会显示}
......{!this.state.showLeft Right /}HTML中使用JSX
script srchttps://unpkg.com/babel-standalone6/babel.min.js/scriptscript typetext/babel /script
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script crossorigin srchttps://unpkg.com/react17/umd/react.production.min.js/scriptscript crossorigin srchttps://unpkg.com/react-dom17/umd/react-dom.production.min.js/scriptscript srchttps://unpkg.com/babel-standalone6/babel.min.js/scripttitleReact 条件渲染/title
/headbodydiv idapp/divscript typetext/babelclass Left extends React.Component {render() {return (divLeft/div)}}class Right extends React.Component {render() {return (divRight/div)}}class Main extends React.Component {state {showLeft: false// showLeft: undefined, // 与运算中效果同false// showLeft: null, // 与运算中效果同false// showLeft: 0 // 在与运算中会显示// showLeft: Number(undefined) // 在与运算中会显示}handleClick() {this.setState({showLeft: !this.state.showLeft})}render() {return (divh1Main/h1button onClick{this.handleClick.bind(this)}{this.state.showLeft ? turn Right : turn Left}/button{// 1. 三目运算// this.state.showLeft ? Left / : Right /}{// 2. 与运算this.state.showLeft Left /}{!this.state.showLeft Right /}/div)}}ReactDOM.render(Main /,document.getElementById(app))/script/body/html列表渲染 JSX → map
table相关warning JSX中使用table若未加tbody、thead会告警 key相关warning
Each child in a list should have a unique “key” prop.列表中的每个子元素都必需有一个唯一的key属性值key是React确定元素是否改变的唯一标识key必需在兄弟节点中是唯一的
不建议使用index作为key值的情况
建立在列表顺序改变、元素增删的情况下列表增删或顺序变了index对应项就会改变若列表是静态不可操作的可以选择index作为key值 用数据唯一的id作为key动态生成一个静态id nanoid yarn add nanoid 每次render都会生成不同的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 (divtable border1theadtrthnanoid/ththID/thth名字/th/tr/theadtbody{this.state.table.map(item {const key nanoid()return (tr key{key}td{key}/tdtd{item.id}/tdtd{item.name}/td/tr)})}/tbody/table/div)}
}
ReactDOM.render(MyTable /,document.getElementById(app)
)key赋值的正确姿势
注意React明确规定key不能作为属性传递给子组件必须显示传递key值使用别的属性名如sid防止开发者在逻辑中对key值进行操作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 (theadtrthnanoid/ththID/thth名字/th/tr/thead)}
}
class MyBody extends React.Component {render() {// 这里constructor super都省略了const { sid, item } this.propsreturn (tr key{sid}td{sid}/tdtd{item.id}/tdtd{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 (divtable border1MyTitle /tbody{this.state.table.map(item {const key nanoid()return (// 分别是传入的2个props 以及自身组件循环时的keyMyBody sid{key} item{item} key{key} /)})}/tbody/table/div)}
}
ReactDOM.render(MyTable /,document.getElementById(app)
)
