无法将根组件道具传递给 children 个组件

Question

我是 react/redux 的初学者，我正在使用 React、Redux 和 React Router v4 创建一个简单的项目。我使用 Redux 来处理状态，它成功地将状态传递给根组件 Wrapper，但它似乎没有将它传递给 Home 或其他组件。当我在 Wrapper 中控制台登录 this.props.Gallery 时，数据显示，但当我在 Gallery 中执行时，它显示 'undefined'。我已经使用 React.cloneElement 在 Wrapper 中传递了 children 但它没有用。是否有对此的解释和一些解决方法？

我的应用项目结构是

--wrapper
 -home
   -gallery
   -about
   -links

这是组件

用于路由 App.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'

import Wrapper from './components/Wrapper';
...

//import store
import {Provider} from 'react-redux'
import store , {history} from './store'


//router 
const mainRouter=(
<Provider store={store} history={history}>
    <Wrapper>
  <BrowserRouter>
     <Switch>
      <Route exact path='/' component={ Home } />
      <Route path='/portfolio' component={ Gallery } />
      <Route path='/about' component={ About } />
      <Route path='/links' component={ Links } />
    </Switch>
    </BrowserRouter>
    </Wrapper>
    </Provider>
  )

ReactDOM.render(mainRouter, document.getElementById('root'))

包装器

import React from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import * as actionCreators from '../actions/actionCreators'


function mapStateToProps(state){
    return{
        gallery:state.gallery
    }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators(actionCreators,dispatch)
}


class Wrapper extends React.Component{

    render(){
        return(
            <div>
                {React.cloneElement(this.props.children, this.props)}
            </div>
            )
    }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Wrapper)

Home.js

import React from 'react'
import { NavLink } from 'react-router-dom'

//import component
...


class Home extends React.Component {

render(){
    console.log(this.props.gallery)
    return(
      <div>
      <p>this is home page</p>
    <Header/>
    <Nav/>
    <Footer/>
      </div>
      )
    }
}


export default Home;

9 月 19 日更新 我已经设法在 react router v4 中创建了嵌套组件，但仍然无法将道具传递给它的直接 children。它抛出 children being undefined

的错误

而且我还将我的组件结构更新为

--Home ~ this is more like a welcome containing app's menu
--Wrapper
  -gallery
  -about
  -links

这是我所做的：我将 Wrapper 移动为画廊、关于和链接的包装器

App.js

<Provider store={store} history={history}>
  <BrowserRouter>
       <div>
      <Route exact path="/" component={Home}/>
      <Route path="/h" component={Wrapper}/>
       </div>
   </BrowserRouter>
    </Provider>

Wrapper.js

function mapStateToProps(state){
  return{
    gallery:state.gallery
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(actionCreators,dispatch)
}


class HomePage extends React.Component {

render() {
  return(
  <div>
       <Route path={`${this.props.match.path}/portfolio`} component={ Gallery } />
       <Route path={`${this.props.match.path}/about`} component={ About } />
       <Route path={`${this.props.match.path}/links`} component={ Links } />

  </div>
)
}
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Wrapper)

Answer 1

您正确地将道具从 Wrapper 传递给 children。但是，Home和Gallery就不是child仁了。他们是曾曾曾祖children。 Wrapper 中唯一的 child 是其中直接包含的元素。在这种情况下，即 BrowserRouter.

您可以通过多种方式让 Home 和 Gallery 可以使用这些道具。但是直接从Wrapper传过来的不是其中之一。

最简单的方法是制作 GalleryContainer class。这将与您已经创建的 Wrapper class 相同（包括它与 redux 的连接），除了它会显式呈现 Gallery，如此；

render() {
    return <Gallery {...this.props}/>;
}

然后使用这个新的 GalleryContainer 作为 /portfolio 路由的组件。

Answer 2

我终于设法将 props 传递给子组件。

我为我的项目创建了两个容器，一个作为主容器，另一个作为子组件 Gallery、About 和 Links 的父容器。

这是App.js

中的结构

const mainRouter=(
    <Wrapper>
<Provider store={store} history={history}>
  <BrowserRouter>
      <div>
      <Route exact path="/" component={Home}/>
      <Route path="/h" component={Container}/>
       </div>
   </BrowserRouter>
    </Provider>
    </Wrapper>
  )

然后在 Container 中，我将它连接到 redux，并创建到它的子子组件的路由，并使用 render 渲染组件并将 gallery 道具传递给 Gallery

<Route path={`${this.props.match.path}/portfolio`} render={()=><Gallery {...this.props.gallery}/>}/>

这是容器

import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as actionCreators from '../actions/actionCreators'
import { Route } from 'react-router-dom'


//import components
...

function mapStateToProps(state) {
      return {
        gallery: state.gallery
      }
    }

    function mapDispatchToProps(dispatch) {
      return bindActionCreators(actionCreators, dispatch)
    }


    class Container extends React.Component {


      render() {

        return (
          <div>
            <ResponsiveNav/>
            <main>
              <Route path={`${this.props.match.path}/portfolio`}
              render={ ()=><Gallery{...this.props}/> } />
             <Route path={`${this.props.match.path}/links`}
              render={ ()=><Link{...this.props}/> } />
              <Route path={`${this.props.match.path}/about`}
              render={ ()=><About{...this.props}/> } />

            </main>
            <Footer/>
          </div>
        )
      }
    }
    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(Container)

无法将根组件道具传递给 children 个组件

Couldn't pass root component props to children components

reactjs

redux

react-router-v4