為什么我不能在 React 組件中使用 const/let？

Question

我像以前一樣使用create-react-app啟動了一個 Reactjs 項目。 這次不允許我在類主體中使用const/let 。 我正在嘗試在MdAddShoppingCart圖標上創建一個點擊處理程序addToCart 。 如果我使用const或let ，它會說：

編譯 ./src/ProductListingPage.js 失敗

第 8:11 行：解析錯誤：意外的令牌

6 | class ProductListingPage 擴展 React.Component { 7 | 8 | const addToCart = () => { | ^

9 | console.log("在 addToCart")

10 | //store.dispatch({ 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);

包.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 中使用 this.y/z 或者你可以簡單地從那個類的this中解構它，

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這樣的函數聲明，它不會從父級繼承 this 透視圖，所以你必須將它綁定到構造函數中的父級。

Answer 2

<MdAddShoppingCart onClick={this.addToCart} />

使用它來訪問類成員

Answer 3

你需要給供參考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 4

'addToCart' 是一個類成員，有點像聲明一個對象方法的簡寫，例如：

const myObj = { 
   hello() { console.log(‘world’) }
}

這相當於

const myObj = { 
   hello: function() { console.log(‘world’) }
}

在聲明這樣的類成員使用 const 或 let 的上下文中沒有意義，因為您不在可以聲明變量的塊中。

但是，您的代碼無法正常工作的原因是您需要訪問 addToCart 作為您的類的方法 - 使用this.addToCart而不僅僅是this 。