реактивный поиск: размещение текста с результатами на странице

Question

Я предполагаю, что помещать <span id="rtxt"></span> в DOM и затем делать это

onResultStats={function (time_taken, total_results) { $('#rtxt').text('Found ' + total_results + ' products (' + time_taken + 'ms).'); return null; }}

в ResultList плохо.

Как один предполагается поставить статистику результатов там, где их хотят?

(Было бы неплохо добавить также некоторое форматирование чисел.)

Answer 1

Лучший способ сделать это - сохранить time_taken и total_results в состоянии вашего компонента, а затем отобразить их любым удобным для вас способом.Обратите внимание, что onResultStats на самом деле является реквизитом рендера и используется внутри функции render внутри, что может вызвать бесконечный цикл, если вы выполните setState без каких-либо проверок.Существует предложение по улучшению спецификации API здесь .Сейчас вы можете обновить состояние вашего компонента после проверки, отличается ли time_taken.Пример:

onResultStats={(total, time) => {
  if (this.state.total !== total) {
    this.setState({ total, time })
  }
  return null;
}

Теперь, когда у вас есть это в state, вы можете отрендерить его так, как вам удобно.