Как создать компонент реакции, который можно визуализировать без данных, а затем визуализировать данными?

Question

У меня есть ситуация, в которой я уверен, распространен, и я просто не научился реагировать на ее решение. Скажем, у меня есть это:

var appView = new React.createClass({ 
    render: function() { 
     return (
      <div> 
       <SomeSubview/> 
      </div> 
     ) 
    } 
}); 

React.render(
    React.createElement(appView), 
    $('#app').get(0) 
); 

Мой вопрос заключается в том, как я должен создать SomeSubView реагировать компонент, так что он может сделать должным образом без каких-либо данных, а затем визуализации показывает некоторые данные, когда имеются данные. У меня есть настройка pub/sub system, поэтому я хотел бы быть в состоянии подписаться на событие и получить данные в SomeSubView таким образом. SomeSubView может выглядеть примерно так:

SomeSubView = new React.createClass({ 
    componentDidMount: function() { 
     pubsub.subscribe({ 
      callback: function() { 
       // something the sets the state or a prop of this component 
      } 
     }); 
    }, 
    render: function() { 
     // something that renders properly when 
     // there is no data and renders the data when there is data 
     return (
      <div></div> 
     ) 
    } 
}); 

Я не могу сказать, если это дело для государства или реквизита на среагировать компоненте? Я не знаю, лучше ли устанавливать условия в функцию рендеринга?

Answer 1

В вашем SomeSubView просто проверьте, доступны ли данные в вашей функции рендеринга, но перед возвратом разметки.

Как это:

SomeSubView = new React.createClass({ 
    componentDidMount: function() { 
     pubsub.subscribe({ 
      callback: function() { 
       // something the sets the state or a prop of this component 
      } 
     }); 
    }, 
    render: function() { 
     // something that renders properly when 
     if(this.state.data.length > 0){ 
      var data = <li>{this.state.data}</li>; 
     } 

     return (
      <div>{data}</div> 
     ) 
    } 
}); 

Если переменные данные не установлены, React будет просто проходить через него, как не существует.

Вы можете, конечно, также использовать .map() в своих данных состояния, чтобы обрезать разметку, как в большинстве примеров рендеринга.

Answer 2

Вы должны использовать состояние, например user3728205, especifically setState().

Слияния nextState с текущим состоянием. Это основной метод , который вы используете для инициирования обновлений пользовательского интерфейса от обработчиков событий и запросов сервера обратных вызовов.

Первым аргументом может быть объект (содержащий ноль или более ключей для обновления ) или функцию (состояния и реквизита), которая возвращает объект , содержащий ключи для обновления.

Вот простой использование объекта ...

setState({mykey: 'my new value'});

Что это говорит о том, что «когда» обновить свое состояние с помощью SetState, React выполнит метод визуализации снова для вас. Таким образом, вы должны поместить yor display logic на основе состояния, когда он изменит отображаемое представление, тоже изменится.

Я говорю «когда-либо», потому что «Реакт» не срабатывает повторно для рендеринга, но создает ожидающий переход состояния.

НИКОГДА не мутируйте this.state напрямую, так как вызов setState() впоследствии может заменить мутацию, которую вы сделали. Относитесь к this.state, как если бы это было неизменяемым.

setState() не сразу мутирует this.state, но создает ожидающий переход состояния . Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

Нет гарантии синхронной работы вызовов setState , и звонки могут быть собраны для повышения производительности.

setState() всегда вызывает повторную визуализацию, если условная ошибка реализована в shouldComponentUpdate(). Если используются изменяемые объекты , и логика не может быть реализована в shouldComponentUpdate(), вызывая setState(), только если новое состояние отличается от предыдущего состояния, это позволит избежать ненужных повторных рендеров.

Для получения дополнительной информации о магии React вы должны прочитать this. https://facebook.github.io/react/docs/reconciliation.html

A simple example что может быть может помочь. И я рекомендую прочитать архитектуру потока, которую очень легко понять и реализовать (речь идет об использовании однонаправленного потока данных), и у вас есть такие реализации, как Fluxxor, что облегчает использование потока. Это для вашей части pubsub.