Как бы вы создали новые элементы на основе ajax-запроса после начальной загрузки в Reactjs?

0

Я новичок в использовании React.js. Теоретически это выглядит довольно аккуратно, но мне нужно переосмыслить, как я решаю даже простые проблемы, которые я использую для решения с помощью jQuery. Одним из них является динамическое создание компонентов после начальной загрузки на основе ввода пользователем.

Скажем, что у меня есть <SearchBox/>, и я хочу, чтобы пользователь мог ввести запрос, щелкнуть поиск и создать произвольное число компонентов <SearchResult/>, основанное на результатах вызова ajax. Я бы предположил, что я создам метод обновления, прикрепленный к SearchBox, который будет вызываться onClick для захвата данных, но как бы я мог динамически рендерить компоненты SearchResult после каждого поиска после поступления данных?

Я полагаю, что я ищу что-то в соответствии с директивой Angular ng-repeat, но я не вижу ничего такого в React.

Теги:
dynamic

2 ответа

0
Лучший ответ

Я мог ошибаться, но я думаю, что это может быть так просто:

...
render: function() {
  var length = data.length; // data contains the result you received from AJAX
  var searchResultObjects = [];
  for (var i = 0; i < length; i += 1) {
    searchResultObjects[searchResultObjects.length] = <SearchResult />;
  }
  return (
    <ul>
      {searchResultObjects} // assuming that your SearchResult object returns an <li> item from its render function 
    </ul>
  );
}
...

И вот пример такого.

Обновить:

Взгляните на эту обновленную скрипту на примере обновления результатов и просмотрите события в console окне Инструменты разработчика вашего браузера. Надеюсь, это прояснится.

Поделиться
  • 0
    Гектометр Это выглядит довольно близко к тому, что я после. Интересно, хотя, если пользователь делает несколько запросов, а содержимое UL перезаписывается несколько раз, будут ли артефакты из предыдущих результатов поиска, которые замедляют работу системы? Знаете ли вы, что предыдущие компоненты должны быть отменены каким-либо образом до обновления?
  • 0
    Вы либо перезаписываете <ul> снова и снова, либо продолжаете помещать объекты в массив, в обоих случаях я думаю, что объект SearchBox продолжает вызывать свой метод render и представление обновляется самостоятельно. React самостоятельно находит различия в HTML и, при необходимости, прекрасно выполняет повторную визуализацию. Я не думаю, что здесь есть какой-либо недостаток производительности.
Показать ещё 2 комментария
0

Самый простой способ составить список - сопоставить результаты поиска с компонентом React и добавить данные в опору.

render: function() {
    var searchResultItems = this.state.searchResults.map(function(object, index) {
        return <SearchResult key={index} data={object} /> // Mapping each item to a React component with the results in a data prop 
    });

    return (
        <div>
            <SearchBox />
            <ul>
                {searchResultItems}
            </ul>
        </div>
    );
}

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню