ラッパーから小児ページに小道具を渡す

Question

こんにちは、ありがとうございました。ルートがロードされたコンポーネントに小道具を渡す際に問題があります。私は経路URLに関するページを読み込むラッパーコンポーネントを持つルートファイルを持っています。ラッパーコンポーネント（レイアウト）では、子コンポーネントにいくつかの小道具を渡したいと思います。しかし子供のコンポーネントはthis.props.childrenで呼び出されるので、私はどのように小道具を渡すのか分かりません。私は多くのことを試みたが、何も働いていなかった。

私は、次のローテスファイルがあります：コンポーネントが私のページコンポーネント検索、キューをロードしている{this.props.children}に

import React from "react"; 

import Footer from "../common/Footer.js"; 
import Nav from "../common/Nav.js"; 
import Header from "../common/Header.js"; 

export default class Layout extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isSongPlaying: false, 
      playingTrackId: "", 
      playingList: [] 
     } 
    } 

    handleClickTrack(track) { 
     this.setState({ 
      isSongPlaying: !this.state.isSongPlaying 
     }); 

    } 

    renderTrack(i) { 
     return (
      <Player audio_id={id} /> 
     ); 
    } 

    render() { 


     const { location } = this.props; 
     const { history } = this.props; 
     const { children } = this.props; 

     return (
      <div> 
       <Header /> 
       <Nav location={location} history={history}/> 

       <div className="container"> 
        <div className="row"> 
         <div className="col-lg-12"> 
          {this.props.children} 
         </div> 
        </div> 
        <div className="row"> 
         <div className="col-lg-12"> 
          <div className="song-player"> 
           {this.state.isSongPlaying ? this.renderTrack(this.state.playingTrackId) : null} 
          </div> 
         </div> 
        </div> 
        <Footer/> 
       </div> 
      </div> 

     ); 
    } 
} 

、および：私が持っているレイアウトで

import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 
import Layout from '../components/pages/Layout.js'; 
import Search from '../components/pages/Search.js'; 
import Queue from '../components/pages/Queue.js'; 
import About from '../components/pages/About.js'; 

const routes =() => 
    <Route path="/" component={Layout}> 
     <IndexRoute component={Search}></IndexRoute> 
     <Route path="queue" component={Queue}></Route> 
     <Route path="about" component={About}></Route> 
    </Route> 
export default routes; 

をAbout、しかし、私はSearch and Queueコンポーネントにコールバック・プロップを追加したいと思います。私は次のことを達成したい私のラッパーレイアウト・コンポーネントで

：

インポートは、「反応」からリアクト。

import Footer from "../common/Footer.js"; 
import Nav from "../common/Nav.js"; 
import Header from "../common/Header.js"; 

export default class Layout extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isSongPlaying: false, 
      playingTrackId: "", 
      playingList: [] 
     } 
    } 

    handleClickTrack(track) { 
     this.setState({ 
      isSongPlaying: !this.state.isSongPlaying 
     }); 

    } 

    renderTrack(i) { 
     return (
      <Player audio_id={id} /> 
     ); 
    } 

    render() { 


     const { location } = this.props; 
     const { history } = this.props; 
     const { children } = this.props; 

     return (
      <div> 
       <Header /> 
       <Nav location={location} history={history}/> 

       <div className="container"> 
        <div className="row"> 
         <div className="col-lg-12"> 
          {RENDER SEARCH WITH onClick prop} 
          {RENDER QUEUE WITH onClick prop} 
         </div> 
        </div> 
        <div className="row"> 
         <div className="col-lg-12"> 
          <div className="song-player"> 
           {this.state.isSongPlaying ? this.renderTrack(this.state.playingTrackId) : null} 
          </div> 
         </div> 
        </div> 
        <Footer/> 
       </div> 
      </div> 
     ); 
    } 
} 

Answer 1

私のリアクションアプリでは私のルートプロップを与えるためにrender={() => <Component/>}を使用しています。それが完璧な方法かどうかわからない。他の方法があるかもしれません。しかし、それは働いている！ :)

はここにあなたのルートの1つの例です：

<Route exact path="/queue" render={() => <Queue prop={something}/>} /> 

Answer 2

あなたは親のレイアウト・コンポーネントにコンテキスト以下childContextTypes静的object.Defineを使用して、子コンポーネントに小道具を渡すことができます。

static childContextTypes={ 
     isSongPlaying: React.PropTypes.bool, 
     playingTrackId:React.PropTypes.string, 
     playingList: React.PropTypes.array 

} 

次にgetChildContextを（使用して値を移入）レイアウトクラスで

getChildContext=()=>{ 
    return { 
    isSongPlaying: false, 
    playingTrackId:"Any Value to child component that you are going to pass", 
    playingList: [] //Array with value 

    } 
    } 

今、あなたは

以下のようなコンテキストタイプを定義することによって、子コンポーネント（About.jsxまたはSearch.jsx）の値を取得することができます

static contextTypes={ 
    isSongPlaying: React.PropTypes.bool, 
    playingTrackId:React.PropTypes.string, 
    playingList: React.PropTypes.array 

} 

今、あなたは

以下のようなコンテキストを使用して、子コンポーネントにプロパティの値にアクセスすることができます

let isPlaying= this.context.isSongPlaying //or 
    let playingTrackId=this.context.playingTrackId