• Почему не работает connect в react-redux?

    miraage
    @miraage
    Старый прогер
    TL;DR: RTFM

    Нет.
    connect(...)(component) возвращает контейнер, который уже можно рендерить.

    const Container = connect(mapStateToProps)(App); // После этого по идее props должны попасть в App, но ничего нет
    
    ReactDOM.render(<Provider store={store}><Container /></Provider>, document.getElementById('root')); // Рендер
    Ответ написан
    1 комментарий
  • Как теряется контекст в классовых компонентах, и как помогает bind?

    @KnightForce
    Если используешь метод внутри класса - то не нужно.
    class Div extends Component {
      constructor(props) {
        super(props);
        this.props=props;
      }
    
      showAlert(value) {
          alert(value);
      }
    
      render() {
          this.showAlert(1);
        return (
          <div>
    
          </div>
        );
      }
    }


    Все будет норм.
    Но если ты будешь передавать какой-то метод в обработчик или в дочерний компонент, то произойдет следующее:
    this - текущий контекст - класс в котором объявлен.
    Далее button (это хоть и простой jsx, но все же компонент) - внутри себя вызывает this.имяМетода - this уже сменился.
    Вот пример:
    class Div extends Component {
      constructor(props) {
        super(props);
        this.props=props;
      }
    
      showEvent(e) {
          alert(e);
      }
    
      render() {
          this.showAlert(1);
        return (
          <div>
              <button onClick={this.showEvent}></button>
          </div>
        );
      }
    }


    this - определяется в момент вызова.
    Чтобы все было ок, есть следующие пути привязки контекста:
    1)var self = this - сохранение в переменную.
    2)apply - вызов метода с явной передачей контекста.
    3)bind(some) - привязка контекста. Говорит функции что использовать в качестве контекста, потом изменить контекст нельзя.
    4)()=>{} - стрелочная функция, которая в отличие от function(){} - определяет контекст не в момент вызова, а в момент объявления.

    Используется фиксированный контекст и метод вызывается используя то что нужно, а не пытается вызваться от другого объекта.
    Ответ написан
    4 комментария
  • Как теряется контекст в классовых компонентах, и как помогает bind?

    mudrenokanton
    @mudrenokanton
    frontend dev
    Внутри функции может потеряться контекст в зависимости от того, как она вызвана.
    // вызов
    obj.foo();
    // и вызов
    const bar =  obj.foo;
    bar();
    // оба вызывают foo, но во втором случае this внутри foo будет привязан не к obj, 
    // а к глобальному объекту

    Таким образом, если мы хотим передать функцию куда-то с определенным контекстом, нам ее надо привязывать. Второй момент, что класс это просто синтаксический сахар, а на самом деле это просто функция, к которой this не привязывается. Таким образом, внутри класса, метод не будет понимать куда вы обращаетесь без привязки.
    Ответ написан
    Комментировать
  • Поясните для чего super(props), а также .bind(this)?

    AndrewN1
    @AndrewN1
    • super(props) - вызвать конструктор наследуемого класса, те React.Component
    • .bind(this) - возвращает функцию с жесткой привязкой контекста
    Ответ написан
    Комментировать
  • Как разобратся в CSS изображения?

    shmatuan
    @shmatuan
    8 year of Web, 5 years of Vue
    .page1 {
    background: url(index.jpg);
    }
    .page2 {
    background: url(index2.jpg);
    }


    <div class="background page1"> </div>
    Ответ написан
    Комментировать
  • Как центрировать элемент по центру круга?

    Кругу display: flex; align-items: center; justify-content: center;
    Ответ написан
    Комментировать
  • Что делать если блок не вмещается в колонку Bootstrap?

    @justabit
    Делить на 4 колонки надо только там, где это действительно надо (как в нижней части картинки с 4 иконками). Верхняя часть будет 1 колонкой.

    Грубый пример:
    <div class="container">
      <div class="row">
        <div class="col">WE DESIGN THINGS</div>
      </div>
    </div>
    
    <div class="container">
      <div class="row">
        <div class="col">ICON</div>
        <div class="col">ICON</div>
        <div class="col">ICON</div>
        <div class="col">ICON</div>
      </div>
    </div>
    Ответ написан
    Комментировать