模拟vue的tag属性,在react里实现自定义Link
Posted kaiqinzhang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模拟vue的tag属性,在react里实现自定义Link相关的知识,希望对你有一定的参考价值。
我封装了一个简单的实现react里自定义Link的方法,方便大家使用。
因为普通组件没有metch、location、history等属性。只有在<Router>里面的<component>渲染的组件才有那三个属性。所以我定义了一个组件,写<Route>来是实现 自定义Link。
class CustomNavLink extends Component{ render(){ return( <Route children={({match,location,history})=>{ return( <li onClink={this.goto.bind(this,history,props.to)}> //通过点击事件来进行跳转。我这里是<li>标签,你可以换成你需要的。 { location.pathname===thiss.props.to?">"+this.props.children:this.props.children //这里写标签里的内容,我这里是实现的是一个点击标签,给当前标签添加一个“>”来标识。 } </li> ) }} > ) } goto(history,to){ //模拟vue里的tag的点击事件 history.push(to) } }
这里是我引用上面组件的一个例子,大家可以参考一下。
class Home extends Component { render () { return ( <div> <ul> <CustomNavLink to="/food">food</CustomNavLink> <CustomNavLink to="/wiki">wiki</CustomNavLink> <CustomNavLink to="/profile">profile</CustomNavLink> </ul> <Switch> <Redirect from="/" exact to="/food" /> <Route path="/food" component={Food} /> <Route path="/wiki" component={Wiki} /> <Route path="/profile" component={Profile} /> <Route component={Page404}/> </Switch> </div> ) } }
以上是关于模拟vue的tag属性,在react里实现自定义Link的主要内容,如果未能解决你的问题,请参考以下文章