javascript - react redux 打印 Prop 的方式

Question

• 我正在尝试将我的通用组件包含在我的 main.js 中
• 这一次我成功了。
• 但在我的公共(public)组件中，我正在尝试打印我的 redux 数据值。
• 所以我创建了一个名为 handleClickForRedux 的方法来打印这些值。
• 我已经包含了 mapStateToProps 和 mapDispatchToProps
• 但仍然没有在这一行打印值。 console.log("event reddux props--->", props);

• 你能告诉我如何解决吗？
• 在下面提供我的代码片段和沙箱。

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

滚动.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);

主要.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;

Answer 1

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

function SportsMouse(props) {