Reactjs 在React中使用提供程序时无法获取props.children

我是一个反应迟钝的新手。我部分遵循本教程创建web应用程序。我使用from‘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')
            );

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>;

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

最后，我的主页有以下代码

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);

---

您的结构有点不稳定，请看一下我的一个类似项目中的这个片段，这可能会提供更好的理解

你的应用程序组件看起来肯定是错的

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>
);

ReactDOM.render(
{routes}
,
document.getElementById（“根”）
);
导出默认值(
);

您需要更正代码中的一些内容

您的应用程序组件返回

this.props.children

。但是，只能从组件返回单个元素。所以你应该把它包在一个div里

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

然后像这样使用它

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

并将其作为

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

---

问题是应用程序组件没有在路由中指定子级。当然，我希望看到navbar.jsxI的代码也包含了我的navbar.jsx代码。这在我看来是错误的

render（）{return This.props.children；}

：（@btzr，这是错误的，但是OP无论如何都没有使用应用程序组件。非常感谢您的详细解释。它起作用了。很乐意帮助：）

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

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