reactjs - 从遗留（纯 JS）应用程序重新渲染 React 组件

Question

在遗留 Web 应用程序中，我们尝试逐步引入 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，因此为所有事件项分配了一个简单的单击事件处理程序。此事件处理程序显示带有 DatePicker React 组件的对话框。

如何使用分配给所选事件的日期值重新呈现 DatePicker 组件？

标签： reactjs

Answer 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>