Почему я не могу использовать const / let в React Component?

Question

Я запустил проект Reactjs, используя create-react-app, как и раньше. На этот раз я не могу использовать const/let в теле класса. Я пытаюсь создать обработчик кликов addToCart на иконке MdAddShoppingCart. Если я использую const или let, он говорит:

Не удалось скомпилировать ./src/ProductListingPage.js

Строка 8:11: Ошибка синтаксического анализа: неожиданно токен

6 | Класс ProductListingPage расширяет React.Component {7 | 8 | const addToCart = () => {| ^

9 | console.log («В addToCart»)

10 | //store.dispatch ({тип: "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

<MdAddShoppingCart onClick={this.addToCart} />

Используйте это для доступа к ученикам

Answer 2

я понимаю, что вы говорите,

вы не можете объявить addToCart с помощью let или const, потому что вы имеете дело не с функциями внутри класса, а с методами класса (очень похожими на object.prototype.method).

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


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

также, чтобы использовать y и z. вы можете использовать this.y / z внутри вашего jsx или просто деструктурировать его из этого этого класса,

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 3

addToCart - это член класса, что-то вроде краткого описания метода объекта, например:

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

, что эквивалентно

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

Это не имеет смысла в контекст объявления такого члена класса для использования const или let, поскольку вы не находитесь в блоке, в котором переменные могут быть объявлены.

Однако причина, по которой ваш код не работает, заключается в том, что вам нужен доступ к addToCart как метод вашего класса - использование this.addToCart вместо this.

Answer 4

Вам нужно дать ссылку для функции 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 class ....