react redux 打印道具的方式答案

【问题标题】：react redux way of printing propsreact redux 打印道具的方式
【发布时间】：2019-10-08 06:05:50
【问题描述】：

我正在尝试在我的 main.js 中包含我的常用组件
这个我做的很成功。
但在我的常用组件中，我正在尝试打印我的 redux 数据值。
所以我创建了一个名为 handleClickForRedux 的方法来打印值。
我已经包含了 mapStateToProps 和 mapDispatchToProps
但仍然没有在此行打印值。 console.log("event reddux props--->", props);
你能告诉我如何解决它吗？
在下面提供我的代码 sn-p 和沙箱。

https://codesandbox.io/s/react-redux-example-265sd

scroll.js

import React, { useEffect, useState, Fragment } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
//import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Drawer from "@material-ui/core/Drawer";
import { bindActionCreators } from "redux";
import * as actionCreators from "../actions/actionCreators";

import { connect } from "react-redux";
import { compose } from "redux";

function SportsMouse(classes, props) {
  // const [canEdit, setCanEdit] = useState(false);

  function handleClickForRedux(event) {
    console.log("event--->", event);
    console.log("event reddux props--->", props);
  }

  return (
    <Card>
      <div onClick={handleClickForRedux}>I am here </div>
    </Card>
  );
}

SportsMouse.propTypes = {
  classes: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    posts: state.posts,
    comments: state.comments
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(SportsMouse);

main.js

import React from "react";
import { Link } from "react-router-dom";

import Scroll from "../commonComponents/scroll";

const Main = props => {
  const { children, match, ...rest } = props;
  return (
    <div>
      <h1>
        <Scroll />
        <Link to="/">Reduxstagram</Link>
      </h1>
      {React.Children.map(children, child => React.cloneElement(child, rest))}
    </div>
  );
};

export default Main;

【问题讨论】：

您提供的沙箱中的那个组件在哪里？

标签： javascript html css reactjs redux

【解决方案1】：

即使使用 material-ui，组件也只接受一个参数。 classes 存在于 props 中。如果你console.log(classes) 你会看到它包含了你所有的道具，包括material-ui 的样式。应该是这样的：

function SportsMouse(props) {

【讨论】：