0

您好，提前感谢您的帮助。我在将道具传递给加载了路线的组件时遇到问题。我有一个带有包装器组件的路由文件，它加载有关路径 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} 上，该组件正在加载我的页面组件 Search、Queue 和 About，但我想向我的 Search 和 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>
        );
    }
}
4

2 回答 2

0

您可以使用 childContextTypes 静态对象将道具传递给子组件。在父布局组件中定义下面的上下文。

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

 }

然后在 Layout 类中使用 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
于 2017-12-16T14:13:55.147 回答
0

我render={() => <Component/>}在我的 React 应用程序中使用来给我的 Routes 道具。不知道这是否是完美的方式。可能还有其他方法。但它的工作！:)

这是您的其中一条路线的示例：

<Route exact path="/queue" render={() => <Queue prop={something}/>} />
于 2017-12-16T14:02:59.567 回答