Як прочитати (розшифрувати) рядки у цьому React коді?

1 Тема від nathan111777 05.09.2019 10:50:31

nathan111777
Новий користувач
Поза форумом

Дата реєстрації: 25.06.2019
Повідомлень: 6

: 0

Тема: Як прочитати (розшифрувати) рядки у цьому React коді?

Доброго дня! Вивчаю react.js. Стараюсь крім того що пишу свій код, вивчати код інших людей. Але дещо не зрозуміло, тому хочу вас запитати як розшифрувати деякі рядки коду, тобто не тільки що вказані рядки роблять але і як вони розшифровуються. Сам код реалізує кнопки, і в залежності на яку натиснути опускають сторінку вниз на 200, 500 чи 1000px.
Прошу допомогти прокоментувати закоментовані рядки по аналогії з тим як я прокоментував рядок №2.

class ScrollButton extends React.Component {
  onClick() {                    // Рядок №1
    window.scrollTo({     // Рядок №2: глобальному об'єкту window встановлюю властивість - метод scrollTo    
      top: this.props.scrollTo,      // Рядок №3
      behavior: 'smooth',
    });
  }

render() {
  return (
   <div className="down" style={{ top: `${this.props.top}px` }}>               // Рядок №4
     <div className="down-text">Scroll to {this.props.scrollTo}
       <button onClick={this.onClick.bind(this)}> &#10095;</button>                 // Рядок №5
      </div>
    </div>
  );
  }
}

const App = () => (
  <div className="container">
    <ScrollButton scrollTo={500} top={50} />      // Рядок №6
    <ScrollButton scrollTo={1000} top={100} />
    <ScrollButton scrollTo={2000} top={200} />
  </div>
);


ReactDOM.render(<App />, document.getElementById('app'));

2 Відповідь від koala 05.09.2019 11:16:56

koala
Лінива тваринка
Поза форумом

Дата реєстрації: 01.05.2013
Повідомлень: 15 290

Репутація

: 13025

Re: Як прочитати (розшифрувати) рядки у цьому React коді?

Одразу зазначу: я з react не знайомий. Я знайомий з js та html/css.
Рядок №1: описуємо метод onClick класу ScrollButton. Тепер будь-який об'єкт класу ScrollButton буде мати метод onClick.
Рядки №2 і 3: викликаємо метод scrollTo глобального об'єкта window з параметром - об'єктом, що має два атрибути: top, зі значенням this.props.scrollTo, та behavior, зі значенням 'smooth'. this стосується того об'єкту ScrollButton, для якого викликано onClick. Що таке props.scrollTo - поки що невідомо.
render() { //визначаємо метод render класу ScrollButton. Як я розумію, цей метод буде викликатися react-ом, коли треба буде додати на сторінку код кнопки.
Рядок №4: задаємо html-розділ (div) з параметрами className="down" і style={ top: `${this.props.top}px` }. Як я розумію, знову ж таки react візьме цей код і підставить замість ${this.props.top} відповідне значення.
Рядок №5: задаємо html-кнопку, методом onClick для якої буде визначений в рядку №1 onClick з першим параметром (тобто this), прив'язаним до поточного об'єкту ScrollButton (інакше виклик onClick буде з this=window).
Рядок №6: задаємо ScrollButton (я так розумію, саме тут буде викликано render) з параметрами scrollTo={500} top={50} (схоже, вони передаються як props, звідси this.props.scrollTo та this.props.top).

Подякували: nathan111777, leofun012

koala вебсайт