189 8069 5689

React碰到v-if的示例分析-创新互联

这篇文章将为大家详细讲解有关React碰到v-if的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

龙江ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

代码：

import React from 'react'

const App = () => {
 const record = {
  toKe: true, // 贝壳首页
  toSecondHand: true, // 二手房
  toFang: true, // 新房
 }
 return (
  
   
    
    
  • 
     
    react常规写法
    
     {
      record.toKe
      ? 贝壳首页
      : null
     }
     {
      record.toSecondHand
      ? 二手房
      : null
     }
     {
      record.toFang
      ? 新房
      : null
     }
    
    • 
   

  
 ) } export default App

如上述代码，我们在项目中会遇到很多这样的写法, 细看一下没什么问题，可是当在重构老项目的时候，你会发现这个代码结构是多么痛苦，特别是如下的结构。

{
  record.toFang && record.toKe && record.toSecondHand
  && 

    贝壳首页
    二手房
    新房
  

}

虽然代码逻辑没问题，但人生就是这样，有时候出场顺序真的很重要。突然就想起vue的v-if了。
没错，回归主题，就是：react中模拟vue的v-if

先上代码

import React from 'react'
import Hidden from './Hidden'
const App = () => {
 const record = {
  toKe: true, // 贝壳首页
  toSecondHand: true, // 二手房
  toFang: true, // 新房
 }
 return (
  
   
    
    
  • 
     
    react模拟实现vue中v-if指令
    
     
      贝壳首页
     
     
      二手房
     
     
      新房
     
    
    • 
   

  
 ) } export default App

简单就是封装Hidden组件，通过visible去控制是否渲染。

相信聪明的你一定知道怎么去封装Hidden

笔者刚开始是这么写的

import React, { Component } from 'react'

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

    { content }
   

  )
 }
}

如此简单，但笔者审查元素的时候发现，每个Hidden下的children莫名被嵌套了一层div

如下

React碰到v-if的示例分析

原来的横着排列的元素，一下子竖着排列了。这可不太好，本来给我套个div，我都可以勉强接收，现在连我布局都给我变了。
怎么办？笔者突然想到使用vue-router中的router-link时，标签是可以通过tag去替换默认标签的。

那我们再给它个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 (
  // 尝试用这种方法去实现，发现不符合react的规则，所以使用最原始的渲染方法
  // React.createElement
  // `<`${tag}`>` + { content } + `` 
  // )
 }
}

问题：笔者的初衷是模拟vue的v-if, 所以对传入的children并没做太多处理，不建议做多做封装。有兴趣的同学可以自己玩。

{
  record.toFang && record.toKe && record.toSecondHand
  && 
    贝壳首页
    二手房
    新房
  
}

  a href="https://bj.ke.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳首页
  二手房
  新房

其实感觉也没多大用处hhhh

关于“React碰到v-if的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


新闻标题：React碰到v-if的示例分析-创新互联
文章URL：http://jkwzsj.com/article/cchesh.html

其他资讯