Задать вопрос

Roman_Kh

Ответы пользователя по тегу React

  • Обертка для компонентов React?

    @Roman_Kh
    Наладить правильную коммуникацию лучше всего с помощью Flux.
    Ответ написан
    Комментировать
    Комментировать

  • Как прослушивать store и ререндерить компонент?

    @Roman_Kh
    Из своего компонента вы dispatch вообще не должны вызывать никогда.
    В Resize вы должны вызывать action, который вызывает dispatch.
    Когда store выполнит обновление, он должен отправлять сообщение, допустим, RESIZE
    Совершенно независимо от этого Modal должен при создании (например, в componentDidMount) подписаться на получение сообщений RESIZE от store.
    Получив сообщение, Modal должен отреагировать на него, например, вызвав render, изменив свое состояние через setState или через forceUpdate().
    Ответ написан
    3 комментария
    3 комментария

  • С помощью React.js можно собирать интерфейсы?

    @Roman_Kh
    Это сделано с помощью React и React Router, а потом собрано WebPack'ом
    Ответ написан
    3 комментария
    3 комментария

  • Как правильно менять состояние потомка (или вызывать функции) из родителя в React.Js?

    @Roman_Kh
    Сделайте компонент SignupModal, который будет представлять модальное окно для регистрации со всеми параметрами и кнопками. А в него потом передавайте функцию для вызова при нажатии на кнопку.
    class SignupModal ... {
   ...
   handleSignupButton(){
      // do something
      if(this.props.onSignup)
        this.props.onSignup()
   }

   render(){
       ...
       <Button .... onClick={this.handleSignupButton} />
       ...
   }
}

class SomeComponent ... {
   ...
   handleSignup(){
      // do something
   }

   render(){
      ...
     <SignupModal ... onSignup={this.handleSignup} />
      ...
   }
   ...
}
    Ответ написан
    4 комментария
    4 комментария

  • React JS. Как получить параметр из вложенного роута?

    @Roman_Kh
    Добавьте в компонент List функцию getId(), которая будет возвращать this.props.params.id
    А в App можно добавить функцию, которая будет возвращать все id всех children'ов.
    Ссылку на функцию можно передать в качестве параметра при создании компонента MenuList
    <MenuList getId={this.getAllIds} />
    А MenuList будет вызывать ее при отрисовке и разбирать, какие пункты сделать активными, а какие нет.

    Как вариант, можно сделать store (см. Flux), который будет содержать данные об отображенных компонентах. И тогда все (App, MenuList, List) будут общаться только с этим store.
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать handleChange(event) который слушает сразу 2 события?

    @Roman_Kh 
    ...
handleChange(source, event){
   // source содержит имя элемента, сгенерировавшего событие: Comp1 или Comp2
   ...
}

render(){
   ...
  <OneComponent ... onSomeEvent={this.handleChange.bind(this, "Comp1"} />
  <OtherComponent ... onAnotherEvent={this.handleChange.bind(this, "Comp2"} />
   ...
}
...
    Ответ написан
    8 комментариев
    8 комментариев

  • Как организовать большой single page application?

    @Roman_Kh
    Есть несколько вариантов динамической загрузки модулей.

    Например, можно разместить каждый компонент в отдельном файле, но в конце вместо exports вставлять компонент в глобальный скоуп браузера.
    var SomeComp = React.createClass({
   ...
})

window.SomeComp = SomeComp

    И затем в другом файле вы легко можете сослаться на этот компонент:
    ...
  render(){
      ...
     <SomeComp ... />
     ...
  }

    Правда, при таком подходе придется вручную реализовать динамическую загрузку скриптов. Впрочем, это не очень сложно, да и есть готовые решения.

    Но лучше всего воспользоваться webpack loaders. Тем более, что они как раз и созданы для вашей задачи.
    Ответ написан
    2 комментария
    2 комментария

  • Как подписать ребенка на событие?

    @Roman_Kh
    Например, вот так
    class Parent {
  ....
  handleChildTick(someData){
      // обработать данные от потомка 
      // (указание на конкретного потомка можно вставить в структуру someData)
  }
  ....
  render(){
      ....
      <Child ... onTick={this.handleChildTick} />
      ....
  }
}

class Child {
  ....
  someAction(){
      ....
      if(this.props.onTick)
          this.props.onTick(someData)
      ....
  }
}
    Ответ написан
    Комментировать
    Комментировать

  • Могут ли сторы хранить компоненты?

    @Roman_Kh
    Поскольку компонент - это объект JavaScript, то чисто технически его можно сохранить в store (стор).
    Но не стоит этого делать, поскольку компоненты React имеют вполне конкретный жизненный цикл, в который не входит состояние "компонент без дела валяется в сторе". Компоненты без проблем можно создавать и удалять "на лету", когда в этом возникает потребность.
    При желании в сторе можно хранить какие-нибудь данные, необходимые для создания ваших компонентов.
    Ответ написан
    4 комментария
    4 комментария

  • Как выбрать конкретный элемент (React Native)?

    @Roman_Kh
    Видимо, вам нужен bind:
    handlePress(photoNo){
    // do something with photo number photoNo
    ....
}
....
render(){
    ....
    <TouchableHighlight onPress={this.handlePress.bind(this, photoNo)}>
      <Image style={...} source={...} />
    </TouchableHighlight>
    ....
}
    Ответ написан
    Комментировать
    Комментировать

  • React и Flux: как получить данные при загрузке страницы?

    @Roman_Kh
    По идее, ваш компонент понятия не имеет, нужно или нет загружать данные с сервера. Об этом знает только store. Поэтому компонент должен лишь запрашивать данные у store, но при этом уметь понимать, что в ответ получены именно данные и тогда отрисовывать обычный контент, или что в ответ получена информация о том, что данные загружаются с сервера и тогда отрисовывать другой контент (например, с иконкой и сообщением о загрузке).
    Примерно так:
    class SomeComponent {
  ...
  componentDidMount() {
      Store.addListener("DATA_CHANGED", this.handleChanged)
      Store.addListener("DATA_LOADED", this.handleLoaded)
  }
  ...
  handleLoaded(){
     // just force rendering (you can do something smart beforehand though)
      this.forceUpdate()
  }

  ...
  renderContent(){
      // your usual render code
      ...
  }

  renderLoading(){
      return <Icon type="spinner" spin />
  }

  render(){
      if(Store.isLoading()){
          return this.renderLoading()
      } else {
          return this.renderContent()
      }
  }
}
    Ответ написан
    Комментировать
    Комментировать

  • Архитектура: коммуникация child-to-parent и хранение состояния?

    @Roman_Kh
    1. Лучше всего написать правильный универсальный store, который будет накапливать информацию о бизнес-логике, а не о состоянии компонент (которое лучше хранить в state).
    Тут придется как следует подумать, зато и результат будет удобнее и функционально богаче.

    2. Но можно и просто по цепочке спустить в потомков ссылку на функцию предка, которая будет реагировать на изменение состояния потомков.
    class RootComponent {
  ....
  collectData(someData){
      // обработать данные от потомка 
      // (указание на конкретного потомка можно вставить в структуру someData)
  }
  ....
  render(){
      ....
      <ColBootstrap ... onStateChange={this.collectData} />
      ....
  }
}

class ColBootstrap {
  ....
  render(){
      ....
      <ClientageBlock... onStateChange={this.props.onStateChange} />
      ....
  }
}

class ClientageBlock {
  ....
  someAction(){
      ....
      if(this.props.onStateChange)
          this.props.onStateChange(someData)
      ....
  }
}

    Этот вариант обычно быстрее в реализации, но он хуже с точки зрения универсальности, дальнейшего развития и поддержки.
    Ответ написан
    Комментировать
    Комментировать