リアクタ・ルータ - 2つのコンポーネントを1つのルートでレンダリングするか、または子コンポーネントが引き続きパラメータにアクセスできるようにしますか？

Question

私は、ルータのブツを反応させるのは、次のようになります。私は今、AudioPlayerを実装し、同じページに表示したいと思い

<Switch> 
    <Route path='/posts/:id' component={PostsView} /> 
    <Route exact path='/' component={Home}/> 
    <Route component={NotFound}/> 
</Switch> 

。

もちろん、をPostsViewにインポートしてそこからレンダリングすることもできます。しかし、私は、2つのコンポーネントを混在させないほうがよかったと思うが、両者をレンダリングし、画面上のものだけを表示する責任がある3番目のコンポーネントの次に別のコンポーネントを配置するほうがよかったと思う。

ポストコンポーネントがルート/posts/:idを必要とするので、私はそれをやろうとしましたが、私は立ち往生してしまったので、3番目のコンポーネントに入れることができませんでした。私はこのような何か試してみました：

<Switch> 
    <Route path='/sentences/:id' component={Main} /> 
    <Route exact path='/' component={Home}/> 
    <Route component={NotFound}/> 
</Switch> 

をしてからMainに私が試した：

render() { 
    return (
     <div> 
     <PostsView /> 
     <AudioPlayer /> 
     </div> 
    ); 
    } 

を...しかし、物事には、ルータを反応させると間違って行くので、これは、間違ったアプローチのようです！ 2つのコンポーネントを組み合わせるのに最も合理的なアプローチは何でしょうか。ルーティングはそのままにしておきますか？

Answer 1

audioplayerがグローバルに示されているものですし、常にアプリで現在表示されているものに関連していないのです何かを果たしている場合は、Reduxのようなグローバルストアにその何かを移動することを検討することをお勧めします。再生するものを選択すると、reduxをアクションで更新し、AudioPlayerの内部では、ストアの変更をリッスンし、それに応じて調整します。

import { setCurrentlyPlaying } from "actions" 

class SomeComponent extends React.Component { 
    onClickTrack = (track) => { 
    this.props.setCurrentlyPlaying(track) 
    } 
} 

export default connect(null, { setCurrentlyPlaying })(SomeComponent) 

このランダム成分はReduxのを経て、現在再生中のトラックを設定します - あなたはまた、

audioplayerでなど、たとえば、プレイリストに追加するあなたの行動を、調整することができます

class AudioPlayer extends React.Component { 
    componentWillReceiveProps(nextProps) { 
    const nextTrack = nextProps.track 
    const currentTrack = this.props.track 

    if (nextTrack !== currentTrack) { 
     // do something 
    } 
    } 

    shouldComponentUpdate(nextProps) { 
    const nextTrack = nextProps.track 
    const currentTrack = this.props.track 

    if (nextTrack !== currentTrack) { 
     // do something 
    } 
    } 

    render() { 
    return (<audio src={this.props.track.src}/>) 
    } 
} 

export default connect(
    (state) => { 
    return { track: state.currentlyPlaying } 
    } 
)(AudioPlayer) 

することができますそれにはいくつかのやり方があります。 audio要素が再レンダリングにどのように反応するかはわかりません（自分で要素を使用したことはありません）ので、shouldComponentUpdateを実装し、必要がない限りコンポーネントを更新しないようにする必要があります。

これを行うと、AudioPlayerとReact Routerと表示されるグローバルな「コンテナ」があります。

<div> 
    <Switch>...</Switch> 
    <AudioPlayer/> 
</div> 

編集あなたはどちらかa）の演奏と共通の親にこのトラックを維持するトラックを設定するためのコールバックを伝承気にしないならば、あなたはreduxは必要ありません。

class Parent extends React.Component { 
    state = { currentlyPlaying: null } 

    setCurrentlyPlaying = (track) => { 
    this.setState({ currentlyPlaying: track }) 
    } 

    render() { 
    return (
     <div> 
     <Child setCurrentlyPlaying={this.setCurrentlyPlaying}/> 
     <AudioPlayer currentlyPlaying={this.state.currentlyPlaying}/> 
     </div> 
    ) 
    } 
} 

またはb）のコールバックを提供するために、contextを使用 - さえのリアクトメンテナは、コンテキストを使用しないことをお勧めしますように私はこのようにそれをやってお勧めしません。私は文脈に精通していないので、あなたがそれをこのようにしたいなら、あなたはそれを行う方法を調べる必要があります。