javascript - react /Redux : Where are my props?

Question

这是我第一次用这个堆栈组合一个新应用程序。此前，我在另一场演出中从事过继承的工作，那里的管道已经安装好了。我的 props 未定义，我需要知道原因。还请大家提出建议。这是删节代码:

index.js

const store = createStore(rootReducer);
render(<Root store={store} />, document.getElementById("root"));

Root.js

const Root = ({ store }) => (
  <Provider store={store}>
    <Router>
      <Route path="/:filter?" component={App} />
    </Router>
  </Provider>
);
Root.propTypes = {
  store: PropTypes.object.isRequired
};
export default Root;

App.js

const App = ({ classes }) => ( // SHOULDN'T THIS BE DESTRUCTURED FROM PROPS?
  <div className={classes.root}> // <== UNDEFINED...WHY NO PROPS?
    <Grid container spacing={24}>
      <Grid item xs={12}>
        <AppBar />
      </Grid>     
    </Grid>
  </div>
);

export default withRoot(compose(connect())(App));

withRoot.js (从 Material-UI 创建默认主题)

const theme = createMuiTheme({
  palette: {
    type: "dark"
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    fontSize: 14,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500
  }
});

function withRoot(Component) {
  function WithRoot(props) {
    // MuiThemeProvider makes the theme available down the React tree
    // thanks to React context.
    return (
      <MuiThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...props} />
      </MuiThemeProvider>
    );
  }

  return WithRoot;
}

export default withRoot;

Answer 1

您需要传递 connect 一个将状态映射到 props 的函数

const mapStateToProps = (state) => ({
  classes: state.classes
});

export default withRoot(compose(connect(mapStateToProps))(App));