在React中使用Provider時無法獲取props.children

Question

我是React的新手。我部分遵循本教程full-stack-redux-tutorial來創建我的Web應用程序。我正在使用'react-redux'將我從服務器收到的數據傳遞給我的某個組件。我index.jsx文件看起來像下面

 import routes from './routes.jsx'; 

     const socket = io(`${location.protocol}//${location.hostname}:8090`); 

    socket.on('curr_all_news', curr_all_news => 
     store.dispatch(setCurrentAllNews(curr_all_news)) 
    ); 

const createStoreWithMiddleware = applyMiddleware(
    remoteActionMiddleware(socket) 
)(createStore); 
const store = createStoreWithMiddleware(reducer); 

      ReactDOM.render((
       <MuiThemeProvider muiTheme={getMuiTheme()}> 
       <Provider store={store}> 
        <Router>{routes}</Router> 
       </Provider> 
       </MuiThemeProvider>), 
        document.getElementById('root') 
      ); 

的routes.jsx文件看起來像下面

import MainNav from './components/navbar.jsx'; 
import App from './components/App.jsx'; 
import {HomePageContainer} from './components/SportsHome.jsx'; 

    const routes =<MainNav component = {App}> 
     <Switch> 
      <Route exact path="/" component={HomePageContainer}/> 
      <Route path ="/login" component = {LoginPage}/> 
      <Route path ="/signup" component = {SignUpPage}/> 
     </Switch> 
    </MainNav>; 

我App.jsx具有下面的代碼

import { Component } from 'react'; 

    export default class App extends Component { 
     render() { 
      return this.props.children; 
     } 
    }; 

最後，我首頁有以下代碼

export class HomePage extends PureComponent{ 
    render() { 
      return <div className="news-holder"> 
      <div className="containerWrapper"> 
       <div className="s-row"> 
       <div className="col-sm-12"> 
        Checking the workng of custom written div 
        <NewsPanel {...this.props} /> 
       </div> 
       </div> 
      </div> 
      </div>; 
    } 
}; 

function mapNewsToProps(curr_all_news){ 
    console.log("curr_all_news here:",curr_all_news); 
    return { 
    news:curr_all_news 
    } 
} 
export const HomePageContainer = connect(mapNewsToProps,actionCreators)(HomePage); 

我的問題是我無法在我的主頁上獲得curr_all_news的價值.i.e我只是在mapNewsToProp函數中獲得一個空列表(List {size: 0, _origin: 0, _capacity: 0, _level: 5, _root: undefined…})作爲curr_all_news的值，而不是被認爲是對象列表的值。我能夠從服務器獲取值，並通過套接字將其傳遞給客戶端，但在App.jsx中，這是給予MainNav的組件，渲染功能永遠不會被調用。我無法弄清楚我缺少的東西提前.Thanks的幫助

我navbar.jsx看起來像下面

import React, { Component, PropTypes } from 'react'; 
import { Navbar, Nav, NavItem } from 'react-bootstrap'; 
import { LinkContainer } from 'react-router-bootstrap'; 

class MainNav extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
     loggedIn: 1, 
     }; 
    } 
    render() { 
     return (
      <div> 
       <Navbar inverse collapseOnSelect> 
        <Navbar.Header> 
         <Navbar.Brand> 
          <a href="/">SportsSpot</a> 
         </Navbar.Brand> 
        <Navbar.Toggle /> 
        </Navbar.Header> 
        <Navbar.Collapse> 
         <Nav> 
          <LinkContainer to="/nfl"> 
           <NavItem>NFL</NavItem> 
          </LinkContainer> 
          <LinkContainer to="/mlb"> 
           <NavItem>MLB</NavItem> 
          </LinkContainer> 
          <LinkContainer to="/nba"> 
           <NavItem>NBA</NavItem> 
          </LinkContainer> 
          <LinkContainer to="/nhl"> 
           <NavItem>NHL</NavItem> 
          </LinkContainer> 
         </Nav> 
        <Nav pullRight> 
         <LinkContainer to="/login"> 
           <NavItem>Login</NavItem> 
         </LinkContainer> 
         <LinkContainer to="/signup"> 
          <NavItem>Sign Up</NavItem> 
         </LinkContainer> 
        </Nav> 
        </Navbar.Collapse> 
       </Navbar> 
       <div className="content"> 
         {this.props.children} 
       </div> 
      </div> 
     ) 
    } 
} 

MainNav.propTypes = { 
    children: PropTypes.element.isRequired, 
}; 

export default MainNav; 

Answer 1

您需要更正代碼中的一些內容。

1. 您的應用程序組件返回this.props.children。但是，您只能從組件返回單個元素。所以，你應該一個div

   export default class App extends Component { 
       render() { 
        return <div>{this.props.children}</div> 
       } 
   }; 
   

2. MainNav需要一個組件作爲道具內包，但你從來沒有真正使用它。將結構更改爲以下內容

   const routes =<MainNav> 
         <App> 
         <Switch> 
          <Route exact path="/" component={HomePageContainer}/> 
          <Route path ="/login" component = {LoginPage}/> 
          <Route path ="/signup" component = {SignUpPage}/> 
         </Switch> 
         </App> 
        </MainNav>; 
   

3. 如果將它連接到Redux存儲區，則無需導出HomePage類。

   class HomePage extends PureComponent{ 
   

，然後使用它像

export default connect(mapNewsToProps,actionCreators)(HomePage); 

並將其導入爲

import HomePageContainer from './components/SportsHome.jsx'; 

Answer 2

你的結構是有點靠不住的，從一個類似的項目看看這個片段我有可能會提供一些更好的理解。

你的應用程序組件肯定看起來不對。

ReactDOM.render(
    <AppContainer> 
    <Provider store={store}> 
     <Router> 
     {routes} 
     </Router> 
    </Provider> 
    </AppContainer>, 
    document.getElementById("root") 
); 

export default (
    <div> 
    <Switch> 
     <Route path="/path0" component={Container0} /> 
     <PrivateRoute path="/path1" component={Container1} /> 
     <PrivateRoute path="/path2" component={Container2} /> 
     <PrivateRoute path="/path3" component={Container3} /> 
     <PrivateRoute path="/path4" component={Container4} /> 
     <PrivateRoute path="/path5" component={Container5} /> 
    </Switch> 
    </div> 
);