React碰到v-if的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)React碰到v-if的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

代碼：

import React from 'react'

const App = () => {
 const record = {
  toKe: true, // 貝殼首頁(yè)
  toSecondHand: true, // 二手房
  toFang: true, // 新房
 }
 return (
  <div style={{width: 600, margin: '50px auto'}}>
   <ul>
    <li>
     <h4>react常規(guī)寫法</h4>
     {
      record.toKe
      ? <a style={{padding: 20}} href="https://bj.ke.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >貝殼首頁(yè)</a>
      : null
     }
     {
      record.toSecondHand
      ? <a style={{padding: 20}} href="https://bj.ke.com/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二手房</a>
      : null
     }
     {
      record.toFang
      ? <a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>
      : null
     }
    </li>
   </ul>
  </div>
 )
}
export default App

如上述代碼，我們?cè)陧?xiàng)目中會(huì)遇到很多這樣的寫法, 細(xì)看一下沒(méi)什么問(wèn)題，可是當(dāng)在重構(gòu)老項(xiàng)目的時(shí)候，你會(huì)發(fā)現(xiàn)這個(gè)代碼結(jié)構(gòu)是多么痛苦，特別是如下的結(jié)構(gòu)。

{
  record.toFang && record.toKe && record.toSecondHand
  && <div>
    <a style={{padding: 20}} href="https://bj.ke.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >貝殼首頁(yè)</a>
    <a style={{padding: 20}} href="https://bj.ke.com/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二手房</a>
    <a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>
  </div>
}

雖然代碼邏輯沒(méi)問(wèn)題，但人生就是這樣，有時(shí)候出場(chǎng)順序真的很重要。突然就想起vue的v-if了。
沒(méi)錯(cuò)，回歸主題，就是：react中模擬vue的v-if

先上代碼

import React from 'react'
import Hidden from './Hidden'
const App = () => {
 const record = {
  toKe: true, // 貝殼首頁(yè)
  toSecondHand: true, // 二手房
  toFang: true, // 新房
 }
 return (
  <div style={{width: 600, margin: '50px auto'}}>
   <ul>
    <li>
     <h4>react模擬實(shí)現(xiàn)vue中v-if指令</h4>
     <Hidden visible={record.toKe} tag='span'>
      <a href="https://bj.ke.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >貝殼首頁(yè)</a>
     </Hidden>
     <Hidden visible={record.toSecondHand} tag='span' style={{padding: 20}}>
      <a href="https://bj.ke.com/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二手房</a>
     </Hidden>
     <Hidden visible={record.toFang} tag='p'>
      <a href="https://bj.fang.ke.com/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>
     </Hidden>
    </li>
   </ul>
  </div>
 )
}
export default App

簡(jiǎn)單就是封裝Hidden組件，通過(guò)visible去控制是否渲染。

相信聰明的你一定知道怎么去封裝Hidden

筆者剛開(kāi)始是這么寫的

import React, { Component } from 'react'

export default class Hidden extends Component {
 render() {
  const { visible, children } = this.props
  const content = visible ? children : null
  return (
   <div>
    { content }
   </div>
  )
 }
}

如此簡(jiǎn)單，但筆者審查元素的時(shí)候發(fā)現(xiàn)，每個(gè)Hidden下的children莫名被嵌套了一層div

如下

原來(lái)的橫著排列的元素，一下子豎著排列了。這可不太好，本來(lái)給我套個(gè)div，我都可以勉強(qiáng)接收，現(xiàn)在連我布局都給我變了。
怎么辦？筆者突然想到使用vue-router中的router-link時(shí)，標(biāo)簽是可以通過(guò)tag去替換默認(rèn)標(biāo)簽的。

那我們?cè)俳o它個(gè)tag唄，連帶自定義屬性。

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 (
  // 嘗試用這種方法去實(shí)現(xiàn)，發(fā)現(xiàn)不符合react的規(guī)則，所以使用最原始的渲染方法
  // React.createElement
  // `<`${tag}`>` + { content } + `</`${tag}`>` 
  // )
 }
}

問(wèn)題：筆者的初衷是模擬vue的v-if, 所以對(duì)傳入的children并沒(méi)做太多處理，不建議做多做封裝。有興趣的同學(xué)可以自己玩。

{
  record.toFang && record.toKe && record.toSecondHand
  && <span>
    <a style={{padding: 20}} href="https://bj.ke.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >貝殼首頁(yè)</a>
    <a style={{padding: 20}} href="https://bj.ke.com/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二手房</a>
    <a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>
  </span>
}
<Hidden 
  visible={record.toFang && record.toKe && record.toSecondHand} 
  tag='span'>
  a href="https://bj.ke.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >貝殼首頁(yè)</a>
  <a style={{padding: 20}} href="https://bj.ke.com/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二手房</a>
  <a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>
</Hidden>

其實(shí)感覺(jué)也沒(méi)多大用處hhhh

關(guān)于“React碰到v-if的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。