This article mainly summarizes the use of the page, including the page style usage, page cycle of different methods, this is in the actual work with a lot of places, I hope to help you, remember to pay attention to the collection, thank you

Page style switch

It is important to note that the className can only be a single class style name and cannot be multiple, so most switching styles are ternary operations

<div className={device.base.status == "1" ? Styles. InformationDivRightOneSpanOnealarm: styles. InformationDivRightOneHeader} >Copy the code

Determine if a piece of content is hidden

Explain the following meaning, the front is the judgment condition, if the condition is true to show the content behind, vice versa hidden content

. {item name = = 'data visualization && (< img style = {{width: 20, height: 20, marginRight: 15, position:' relative 'top: 4}} SRC = {ico1} > < / img >)}Copy the code

Multiple content cases

{device. Type = = 'xf_yyht && (< > < div className = {styles. InformationDivRightOneBasic12} > < span > class & have spent &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &thinsp; Type: < / span > point type carbon monoxide detector < / div > < div className = {styles. InformationDivRightOneBasic12} > < span > rules & have spent &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &thinsp; Grid: </span> Co detection type </div> </>)}Copy the code

The ternary operation displays the page

{ disposeData.alarm == 'P'? < Button type = "primary" size = "large" onClick = {() = > {IsAlarm (' C ')}} > machine < / Button > : <Button type="primary" warning size="large" onClick={()=>{IsAlarm('P')}}> </Button>}Copy the code

Page loop

Loop through the Object. Keys method on the page

{Object.keys(MaintenancetableData.data.list).map(lang => ( <> <div className={styles.InformationDivRightTwoCheck}> {MaintenancetableData.data.list[lang].createtype==0? } </div> </>))}Copy the code

Define a function and call it on the page

const renderCards = () => tableData.list.map((c, i) => ( <div className={styles.ViewItem} key={i} onClick={()=>changeTagListStatus(c)}> <div The className = {styles. The title} > {c.n ame} < / div > {c.o ffline && (< div className = {styles. Content_off} > offline < / div >)} < / div >)); <div> {renderCards()} </div>Copy the code