@ArturPetrov

Вопрос о ключевом слове super?

Как говорит документация:
Ключевое слово super используется для вызова функций, принадлежащих родителю объекта.
Часто встречаю особенно в React коде super в конструкторах. Хотя вот в js редко встречалось мне это слово. Почему так? Почему в js часто конструктор без него, а в React он повсюду там где есть конструктор?

И еще вопрос вот есть пример кода где по нажатии на кнопку открывается новое окошко. Какую функцию здесь вызывает super? Какой здесь родитель которому предналежит функция и какой обьект(ребенок)? И что было бы, если бы не было super? ну то есть я понимаю что ошибка была бы, но если бы его не было как по другому пришлось бы написать код?

import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

class Example extends Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { collapse: false };
  }

  toggle() {
    this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
        <Collapse isOpen={this.state.collapse}>
          <Card>
            <CardBody>
            Anim pariatur cliche reprehenderit,
             enim eiusmod high life accusamus terry richardson ad squid. Nihil
             anim keffiyeh helvetica, craft beer labore wes anderson cred
             nesciunt sapiente ea proident.
            </CardBody>
          </Card>
        </Collapse>
      </div>
    );
  }
}

export default Example;


ссылка на источник кода:
reactstrap.github.io/components/collapse
  • Вопрос задан
  • 163 просмотра
Решения вопроса 3
pterodaktil
@pterodaktil
js developer
super(props) используется для того, чтобы вызвать метод constructor(props) у React.Component, мы же пишем extends, грубо говоря, под капотом
class Component {
  constructor(props) {
    this.props = props;
  }
}

а без конструктора это выглядит так
import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

class Example extends Component {
  state = {
    collapse: false
  };

  toggle = () => {
    this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
        <Collapse isOpen={this.state.collapse}>
          <Card>
            <CardBody>
            Anim pariatur cliche reprehenderit,
             enim eiusmod high life accusamus terry richardson ad squid. Nihil
             anim keffiyeh helvetica, craft beer labore wes anderson cred
             nesciunt sapiente ea proident.
            </CardBody>
          </Card>
        </Collapse>
      </div>
    );
  }
}

export default Example;
Ответ написан
Комментировать
rockon404
@rockon404 Куратор тега React
Frontend Developer
Объявление:
class Example extends Component { ... }
Определяет класс Example который наследуется от Compоnent.

super(props);
Вызов конструктора Component с передачей первым аргументом объекта props.
Ответ написан
@disappearedstar
Фронтенд-разработчик
Можно еще почитать про super применительно к React здесь: https://overreacted.io/why-do-we-write-super-props/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
23 апр. 2024, в 19:05
15000 руб./за проект
23 апр. 2024, в 19:01
7000 руб./за проект
23 апр. 2024, в 18:47
10000 руб./за проект