Блог

Главная - Вопросы по программированию - Повторный запуск компонента React из устаревшего приложения (простой JS)

Повторный запуск компонента React из устаревшего приложения (простой JS)

#reactjs

#reactjs

Вопрос:

В устаревшем веб-приложении мы пытаемся внедрить React шаг за шагом. Наш первый компонент — это средство выбора даты, которое имеет просто один реквизит с начальным значением:

<DatePicker date="2020-08-15" />

Это отлично работает в базовых случаях.

Теперь мы хотим использовать компонент на странице списка событий, где перечислены несколько событий. Если пользователь нажимает на событие, то будет показано небольшое диалоговое окно редактора, в котором можно отредактировать дату события. Дата события указана в атрибуте данных, подобном этому:

 <div class="event" data-event-date="2020-08-15">...</div>
<div class="event" data-event-date="2020-09-25">...</div>
<div class="event" data-event-date="2020-10-07">...</div>

Пожалуйста, обратите внимание, что на этой странице используется обычный JavaScript, поэтому всем элементам события назначен простой обработчик события click. Этот обработчик событий показывает диалоговое окно с реагирующим компонентом DatePicker.

Как я могу повторно перенаправить компонент DatePicker со значением даты, присвоенным выбранному событию?

Ответ №1:

Вот очень быстрый макет. Вам нужно было бы внедрить более надежные проверки и, очевидно, адаптировать специфику к вашей кодовой базе, но это иллюстрирует базовое взаимодействие vanilla / React.

 let DATE = null;

function Confirmation({date}) {
  return (
        <div>
      {date ? (
            <DatePicker date={date} />
        ) : null
        }
    </div>
  );
}

function DatePicker({date}) {
    return (
    <div class="datepicker">{date}</div>
  );
}

function setDate(e) {
    DATE = e ? e.target.getAttribute('data-event-date') : null;
  ReactDOM.render(<Confirmation date={DATE} />, document.getElementById("root"));
}

document.querySelectorAll('.event').forEach(el => el.addEventListener('click',(e) => setDate(e)))

ReactDOM.render(<Confirmation data={DATE} />, document.getElementById("root"));  
 #container {
  margin: 8px auto;
}

btn {
  background-color: gray;
  border: 1px solid black;
  padding: 4px;
  margin: 8px;
}

.datepicker {
  padding: 8px;
  margin: 8px;
  background-color: green;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="container">
  <btn type="button" class="event" data-event-date="2020-08-15">2020-08-15</btn>
  <btn type="button" class="event" data-event-date="2020-09-25">2020-09-25</btn>
  <btn type="button" class="event" data-event-date="2020-10-07">2020-10-07</btn>
  <btn type="button" class="event" onClick="setDate(null)">Clear</btn>

  <div id="root"></div>
</div>