为什么我不能使用const/let中的React组件？

Question

我像以前一样使用create-react-app启动了一个Reactjs项目。这一次它不允许我在类主体中使用const/let。我正在尝试在MdAddShoppingCart图标上创建一个单击处理程序MdAddShoppingCart。如果我使用const或let，它会说：

未能编译./src/ProductListingPage.js

第8:11行:解析错误:意外令牌

6\x类ProductListingPage扩展了React.Component {7~++8~_

9连console.log("In addToCart")

分派({ type："ADD_TO_CART“})；

[ 11 ]

如果我不使用这些关键字并像这样定义函数签名：

addToCart = () => {}

上面写着：

第24:65行：“addToCart”未定义为no-undef

我不能做出这种行为。任何帮助都将不胜感激。下面是相关代码。

ProductListingPage.js

import React from 'react';
import { connect } from 'react-redux';
import { MdAddShoppingCart } from "react-icons/md";
import { Grid, Row, Col } from 'react-flexbox-grid';

class ProductListingPage extends React.Component {

addToCart = () => {
    console.log("In addToCart")
    //store.dispatch({ type: "ADD_TO_CART" });
}
render() {
    return (
        <React.Fragment>
            <h3>Product Listing Page</h3>
            <ol>
                {this.props.products.map((product, index) =>
                    <Grid fluid>
                        <Row>
                            <Col>
                                <li key={index}>{product}</li>
                            </Col>
                            <Col>
                                <MdAddShoppingCart onClick={addToCart} /> //line 24
                            </Col>
                        </Row>

                    </Grid>
                )}
            </ol>
        </React.Fragment>
    );
}
}

function mapStateToProps(state) {
return {
    ...state,
    products: state.products
};
}
export default connect(mapStateToProps)(ProductListingPage);

Package.json

      {
    "name": "cart-screen",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "react": "^16.12.0",
      "react-dom": "^16.12.0",
      "react-flexbox-grid": "^2.1.2",
      "react-icons": "^3.8.0",
      "react-redux": "^7.1.3",
      "react-scripts": "3.3.0",
      "reactstrap": "^8.4.0",
      "redux": "^4.0.5"
    },
    "scripts": {
      "start": "./node_modules/react-scripts/bin/react-scripts.js start",
      "start:prod": "pushstate-server build",
      "build": "./node_modules/react-scripts/bin/react-scripts.js build",
      "test": "./node_modules/react-scripts/bin/react-scripts.js test --env=jsdom",
      "eject": "./node_modules/react-scripts/bin/react-scripts.js eject",
      "server": "cd client/api && pm2 start server.js --watch",
      "proxy": "http://128.199.139.144:3000"
    },
    "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }

Answer 1

我明白你在说什么，

您不能用let或const声明addToCart，因为您处理的不是类内的函数，而是类方法(与object.prototype.method非常类似)。

//wrong..
class x extends Component {
 let y = () => {}
}


//correct..
class x extends Component {
 y = () => {}
 z() {}
}

另外，为了使用y和z，您可以在jsx内使用这个.y/z，或者只需将其从这个类的中解构，

constructor(props) {
super(props)
 this.z = this.z.bind(this)
}

render() {
 const { z, y } = this

 return (
  <div>
   <div onClick={() => y()} ...rest of the div.../>
   <div onClick={() => z()} ...rest of the div.../>
  </div>
 )
}

或者只是..。

render() {
 return (
  <div onClick={() => this.y()} ..../>
  //<div onClick={this.y} ...will also do if you don't want to pass any params..../>
 )
}

由于箭头函数语法本身没有任何--这个透视图，所以您可以简单地使用它。但是，如果您处理的是像z这样的函数声明，它不会从父函数继承这个透视图，所以必须将其绑定到构造函数中的父函数。

Answer 2

您需要将addToCart函数的引用作为在此Class中定义的函数提供，因此需要使用this.addToCart而不是-：

<Col>
    <MdAddShoppingCart onClick={this.addToCart} /> //line 24
</Col>

另外，const或let不能工作，因为这是一个Class而不是function。

如果我们定义这样的-：

class ProductListingPage extends React.Component {

    addToCart = () => {
        console.log("In addToCart")
    }
    render() {
        return (
            <React.Fragment>
                <h3>Product Listing Page</h3>
            </React.Fragment>
        );
    }
}

它转化为这个-：

function ProductListingPage(){
    //constructor code
}

和,

ProductListingPage.prototype.addToCart = function () {
    console.log("In addToCart");
}

随后，对于呈现函数也是如此，但唯一不同的是render函数是从React.Component类继承来的。

Answer 3

<MdAddShoppingCart onClick={this.addToCart} />

使用它访问类成员