react中对NavLink进行二次封装

react中对NavLink进行二次封装,第1张

demo如下:

一、创建一个MyNavLink 的组件
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import "./myNavLink.css"
export default class MyNavLink extends Component {
    render() {
        console.log(this.props)
        //let {to,children} = this.props
        // 标签体的内容通过children属性渲染在标签上
        return (
            // 写法一:推荐
            <div className='myNavLink'>
                <NavLink {...this.props} className="navItem" activeClassName='activeItem'></NavLink> 
            </div>
            // 写法二:不推荐,如果有很多属性还需要每个进行展示,增加代码量
            // 
            //     {children}
            // 
        )
    }
}

二、在需要使用的页面引入组件并使用


1、activeClassName是NavLink组件上面的激活样式属性
2、标签体内容是一个特殊的标签属性,通过this.props.children可以获取标签体内容

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/742212.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-28
下一篇 2022-04-28

发表评论

登录后才能评论

评论列表(0条)

保存