react redux 打印道具的方式

Question

• 我试图在我的 main.js 中包含我的通用组件

• 这个我成功地做到了。

• 但在我的公共组件中，我试图打印我的 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);

主文件

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)会看到它包含您所有的道具，包括 material-ui 的样式。应该是这样的：function&nbsp;SportsMouse(props)&nbsp;{