reactjs - ラッパーから 1 つの子ページに小道具を渡す

Question

こんにちは、ご協力ありがとうございます。ルートがロードされたコンポーネントに小道具を渡す際に問題があります。パス URL に関するページをロードするラッパー コンポーネントを含むルート ファイルがあります。ラッパー コンポーネント (レイアウト) で、子コンポーネントにいくつかの小道具を渡したいと思います。しかし、子コンポーネントが this.props.children で呼び出されるため、小道具を渡す方法がわかりません。私は多くのことを試しましたが、何もうまくいきませんでした。

次のrotesファイルがあります。

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;

レイアウトには次のものがあります。

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>

        );
    }
}

{this.props.children} で、コンポーネントはページ コンポーネントの検索、キュー、および概要をロードしていますが、コールバック プロパティを検索およびキュー コンポーネントに追加したいと考えています。

私のラッパーレイアウトコンポーネントでは、次のことを達成したいと考えています:

「react」から 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">
                            {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>
        );
    }
}