Question

我是React的新手。我正在部分关注本教程full-stack-redux-tutorial来创建我的Web应用程序。我正在使用＆＃39; react-redux＆＃39;将我从服务器收到的数据传递给我的一个组件。我的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的值。我只在mapNewsToProp函数中获取一个空列表(List {size: 0, _origin: 0, _capacity: 0, _level: 5, _root: undefined…})作为curr_all_news的值而不是应该是一个对象列表。我能够从服务器获取值并通过套接字将其带到客户端，然后在App.jsx中，这是给予MainNav的组件，渲染函数永远不会被调用。我无法弄清楚我错过了什么。提前感谢您的帮助

我的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

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

您的App组件返回this.props.children。但是，您只能从组件返回单个元素。所以你应该把它包装在一个div
中
```
export default class App extends Component {
    render() {
       return <div>{this.props.children}</div>
    }
};
```

MainNav将组件作为道具，但您从未真正使用它。将结构更改为以下

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

如果要将其与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>
);

在React中使用Provider时无法获得props.children

2 个答案: