Question

我首先使用以下内容开始处理此问题，＆＃39; HomePage.js＆＃39;作为唯一的智能组件：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actions from '../redux/actions'

import AppFloatBar from './AppFloatBar'
import MainCoverPhoto from './MainCoverPhoto'
import FirstPage from '../pages/FirstPage'

import { deepOrange500, grey400 } from 'material-ui/styles/colors'

import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'


const muiTheme = getMuiTheme(
  darkBaseTheme,
  {
    palette: {
      accent1Color: deepOrange500,
      textColor: grey400,
      textColor2: grey400,
    },
    appBar:{
      height: 67,
      color:'black',
      textColor:'#A0A0A0',
    },
  }
);

class HomePage extends Component {

  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
          <AppFloatBar
            actions={this.props.actions}
            floatBar={this.props.floatBar}
          />
          <MainCoverPhoto/>
          <div className="thread_body">
            {(() => {
              switch (this.props.children.props.route.path) {
                case 'Page 1':
                  return <FirstPage addTodo={this.props.actions.addTodo}    actions={this.props.actions}
                  todos={this.props.todos}
                  inputTexts={this.props.inputTexts}
                  />
                case 'Page 2':
                  return this.props.children
                case 'Page 3':
                  return this.props.children
                default:
                  return this.props.children
              }
            })()}
          </div>
        </div>
      </MuiThemeProvider>
    );
  }
}

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HomePage)

使用以下react-router，在client.js中：

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          path="/"
          component={HomePage}
        >
            <IndexRoute
              component={MainCard}
            />
            <Route
              component={FirstPage}
              path="Page 1"
            />
            <Route
              component={SecondPage}
              path="Page 2"
            />
            <Route
              component={ThirdPage}
              path="Page 3"
            />
            <Route
              component={ThreadPage}
              path="/discussion/:id"
            />
            <Route
              component={StaticPage}
              path="Static"
            />
        </Route>
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

它工作正常。但我决定制作一个主页＆＃39;这就是我想要的网站现在开始。我想从＆＃39; MainPage＆＃39;开始。当点击一个按钮时，转到“主页”页面。所以我修改了client.js中的react-router：

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          component={MainPage}
          path="/"
        />
        <Route
          component={HomePage}
          path="Home"
        />
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

使用＆＃39; MainPage.js＆＃39;：

中的以下内容

render(){
    return(
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
            <RaisedButton
              containerElement={<Link to={`Home`}/>}
              label="Sign In"
              labelColor='#88898C'
              labelStyle={{textTransform:'intial'}}
              style={styles.signIn}
            />
    </div>
          </MuiThemeProvider>
        )
      }
    }

    function mapStateToProps(state) {
      return state
    }

    function mapDispatchToProps(dispatch) {
      return {
        actions: bindActionCreators(actions, dispatch)
      }
    }

    export default connect(
      mapStateToProps, mapDispatchToProps
    )(MainPage)

现在当＆MainPage.js＆＃39;中的按钮出现时点击后，链接/网址会更改为＆＃39; Home＆＃39;正确，但显示＆＃39; HomePage.js＆＃39;：

的以下错误消息

TypeError: Cannot read property 'props' of undefined

试图解决它，但似乎仍然忽略了这个问题。可能是什么问题？任何帮助都会非常感激。谢谢。

Answer 1

这里的问题是，在您的第一个实现中，HomePage是一个容器组件。始终呈现HomePage，并在其中呈现其他组件。

在您的跟进中，HomePage不再是容器组件。其中没有其他组件呈现。这意味着this.props.children是undefined（它可能应该是一个空数组，但这是一个React设计决策）。

在switch条件中，由于this.props.children为undefined，因此undefined.props.route.path会抛出TypeError。

为什么我得到＆＃39; TypeError：无法阅读属性＆＃39;道具＆＃39;未定义的＆＃39; （react-router，React-Redux）？

1 个答案: