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可以获取标签体内容
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)