改造“路线孩子"和“克隆元素"到路由器V4 [英] transform "Route children" and "cloneElement" to RouterV4
问题描述
我想在 React 项目中编写一个路由器.但是 Route children 和 cloneElement 不再适用于版本 4.我还没有找到演示或导师来教如何在路由器版本 4 中传递值.
有人想解决这个问题吗?
我在 Github 上的项目:https://github.com/LeMueller/Musicplayer-by-react/tree/dev
非常感谢.
import React, {Component} from 'react';从'./commen/header.js'导入标题;从'./page/player.js'导入播放器;从'../config/musiclist'导入{MUSIC_LIST};从 './page/musiclistui.js' 导入 MusicListUI;从react-router-dom"导入 {HashRouter, Switch, Route, Link};类 MusicApp 扩展组件{构造函数(道具){超级(道具);this.state={音乐列表:MUSIC_LIST,当前音乐项目:MUSIC_LIST[0]}}componentDidMount(){$('#player').jPlayer({准备好:功能(){$(this).jPlayer('setMedia',{mp3:'http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.mp3'}).jPlayer('播放');},提供:'mp3',wmode: '窗口'});}componentWillUnMount(){}使成为(){返回(<div>{React.cloneElement(this.props.children, this.state)}
)}}导出默认类根扩展组件{使成为(){返回(<HashRouter><div><标题/><路由精确路径="/" component={MusicApp}><路由精确路径="/" component={Player }></Route><Route path="/list" component={MusicListUI}></Route></路线>
</HashRouter>)}}
如果您希望通过组件将 props 传递给组件,那么您可以使用 render,例如:
<路由精确路径="/" render={(props) =><玩家示例={ props.example }/>}></路由>
I want to write a Router in React Project. But Route children and cloneElement work not anymore by Version 4. I haven't found demo or tutor to teach how to pass value in router in Router Version 4.
Have someone idea to solve that?
My project in Github: https://github.com/LeMueller/musicplayer-by-react/tree/dev
Thanks a lot.
import React, {Component} from 'react';
import Header from './commen/header.js';
import Player from './page/player.js';
import {MUSIC_LIST} from '../config/musiclist';
import MusicListUI from './page/musiclistui.js';
import {HashRouter, Switch, Route, Link} from 'react-router-dom';
class MusicApp extends Component{
constructor(props){
super(props);
this.state={
musiclist: MUSIC_LIST,
currentMusicItem: MUSIC_LIST[0]
}
}
componentDidMount(){
$('#player').jPlayer({
ready:function(){
$(this).jPlayer('setMedia',{
mp3:'http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.mp3'
}).jPlayer('play');
},
supplied:'mp3',
wmode: 'window'
});
}
componentWillUnMount(){
}
render(){
return(
<div>
{React.cloneElement(this.props.children, this.state)}
</div>
)
}
}
export default class Root extends Component{
render(){
return(
<HashRouter>
<div>
<Header/>
<Route exact path="/" component={MusicApp}>
<Route exact path="/" component={Player }></Route>
<Route path="/list" component={MusicListUI}></Route>
</Route>
</div>
</HashRouter>
)
}
}
If you are looking to pass props to a component via a component, then you can use render, for example:
<Route exact path="/" render={(props) => <Player example={ props.example } /> }></Route>
这篇关于改造“路线孩子"和“克隆元素"到路由器V4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!