Выбор и хранение DIV на ReactJs

Если вы хотите сохранить состояние после перезагрузки, возможно, вам стоит взглянуть на HTML Web Storage.

В порядке предпочтения я бы использовал:

1) Если вы используете React 16.3 или более позднюю версию, используйте api контекста реакции 2) Если у вас не версия 16.3 или выше, вы можете использовать библиотеку, такую ​​как redux или flux 3) вы можете использовать локальное хранилище HTML.

Вот дополнительная информация о Redux vs context api:
https://daveceddia.com/context-api-vs-redux/

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

Вот пример с локальным хранилищем:

import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { list: null };
  }

  onSearch = (e) => {
    e.preventDefault();

    const { value } = this.input;

    if (value === '') {
      return;
    }

    const cached = localStorage.getItem(value);
    if (cached) {
      this.setState({ list: JSON.parse(cached) });
      return;
    }

    fetch('https://search?query=' + value)
      .then(response => response.json())
      .then(result => {
        localStorage.setItem(value, JSON.stringify(result.list));
        this.setState({ list: result.list });
      });

  }

  render() {
    return (
      <div>

        <form type = "submit" onSubmit = {this.onSearch}>
          <input type = "text" ref = {node => this.input = node} />
          <button type = "button">Search</button>
        </form>

        {
          this.state.list &&
          this.state.list.map(item => <div key = {item.objectID}>{item.title}</div>)
        }
      </div>
  }

}

Судя по вашему вопросу, похоже, что вы

• на вашей странице есть продукты, которые вы представляете как элементы <div>
• меняют границу при нажатии
• хотите, чтобы они отображались выбранными, когда пользователь обновляет страницу

React касается представления некоторых данных, но не решает, как вы разместите эти данные на странице. Похоже, вы хотите где-то сохранить список выбранные продукты, а затем снова загрузить этот список на страницу, когда пользователь обновится. API веб-хранилища может быть полезным, но файлы cookie и сеансы могут делать то же самое.

Тебе следует

• выберите, что хранить (возможно, список идентификаторов товаров)
• выберите, где его хранить (localStorage, cookie, сервер или, возможно, в URL-адресе с https://reach.tech/router)
• когда ваша страница реакции загружается (componentDidMount для некоторого компонента), прочтите список из localstorage в свое состояние
• сопоставьте свой список «выбранных продуктов» с вашими отдельными продуктами в render

Итак, если вы загрузили список из одного из вариантов хранения в свое состояние как selectedProductIds, а ваш список продуктов находится в состоянии как products

isSelected = (product) => {
   this.state.selectedProductIds.includes(product.id)
}

render() {
  return <section>
    { this.state.products.map((product) =>
        <div className = {this.isSelected(product) ? 'selected item' : 'item'}>
           {product.name}
        </div>
    )}
  </section>
}

Синхронизация состояния React с каким-либо другим механизмом хранения может стать довольно запутанной.