Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of React encountering v-if for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Code:

Import React from 'react'const App = () = > {const record = {toKe: true, / / Shell Home toSecondHand: true, / / second-hand Housing toFang: true, / / New Housing} return (react routine {record.toKe? Shell Home: null} {record.toSecondHand? Second-hand house: null} {record.toFang? New house: null})} export default App

Such as the above code, we will encounter a lot of such writing in the project, there is no problem to take a closer look, but when you ReFactor the old project, you will find how painful the code structure is, especially the following structure.

{record.toFang & & record.toKe & & record.toSecondHand & & Shell Home second-hand Housing New Housing}

Although the code logic is fine, that's the way life is, and sometimes the order of appearance is really important. Suddenly I think of vue's v-if.

Yes, back to the subject, which is: v-if that simulates vue in react

Put the code first.

Import React from 'react'import Hidden from'. / Hidden'const App = () = > {const record = {toKe: true, / / Shell Home toSecondHand: true, / / second-hand Housing toFang: true, / / New Housing} return (react simulates the implementation of v-if command shell home in vue)} export default App

Simple is to encapsulate Hidden components, through the visible to control whether to render.

If you are smart, you must know how to encapsulate Hidden.

That's what the author wrote at first.

Import React, {Component} from 'react'export default class Hidden extends Component {render () {const {visible, children} = this.props const content = visible? children: null return ({content})}}

It's so simple, but when I examine the elements, I find that the children under each Hidden is inexplicably nested with a layer of div.

As follows

The original horizontal arrangement of the elements, all of a sudden arranged vertically. This is not very good. I could barely accept a div for me, but now even my layout has changed for me.

What shall I do? It occurred to me that when using router-link in vue-router, the tag can be replaced by the default tag through tag.

Let's give it another tag, along with custom attributes.

Import React, {Component} from 'react'export default class Hidden extends Component {render () {const {visible, children, tag =' div',... rest} = this.props const content = visible? Children: null return (React.createElement (tag, rest, content)) / / return (/ / try to implement it with this method and find that it does not conform to the rules of react, so use the original rendering method / / React.createElement / / ``+ {content} +`` / /)}}

Problem: the author's original intention is to simulate the v-if of vue, so there is not much processing for the incoming children, so it is not recommended to do more encapsulation. Interested students can play by themselves.

{record.toFang & & record.toKe & & record.toSecondHand & & Shell Home second-hand Housing} a href= "https://bj.ke.com" rel=" external nofollow "> Shell Home second-hand Housing

Actually, it doesn't feel very useful, hhhh.

This is the end of the article on "example Analysis of React encountering v-if". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.