如何从映射函数中仅选择一个元素?

Question

我正在使用map函数在页面中呈现许多事件。当我单击某个事件时，我应该在该事件下方看到该事件的描述。目前，地图上每个事件都会显示我想要的事件描述，这很糟糕。

我该怎么做，所以事件的描述只出现在我点击的事件中？

<div className="dayDiv">
<p className="text day"> {day} </p>{" "}
<div className="eventsDiv">
{" "}
{this.state.events &&
this.state.events.map(data => {
if (
date.getUTCDate() === data.day &&
date.getMonth() === data.month
) {
return (
<div className="event">
<p className="text">
<span className="time">
{" "}
{data.time} {data.meridian} -{" "}
</span>{" "}
{data.title}{" "}
</p>{" "}
<div
onClick={e => this.expandEvent(data.id)}
className="smallPlusDiv"
>
<i className="fa fa-caret-down"> </i>{" "}
</div>{" "}
{this.state.eventData &&
this.state.expandEvent &&
this.state.expandEvent === true && (
<div>
<table className="text eventDescription">
<tr className="text eventDescription">
<td className="text eventDescription">Where:</td>{" "}
<td className="text eventDescription">
{" "}
{this.state.eventData.data.adress}{" "}
</td>{" "}
</tr>{" "}
<tr>
<td className="text eventDescription">When:</td>{" "}
<td className="text eventDescription">
{" "}
{this.state.eventData.data.time}{" "}
{this.state.eventData.data.meridian}{" "}
{this.state.eventData.data.day}{" "}
{this.state.eventData.data.month}{" "}
</td>{" "}
</tr>{" "}
<tr>
<td className="text eventDescription">About:</td>{" "}
<td className="text eventDescription">
{" "}
{this.state.eventData.data.description}{" "}
</td>{" "}
</tr>{" "}
<tr>
<td className="text eventDescription">price:</td>{" "}
<td className="text eventDescription">
{" "}
{this.state.eventData.data.price}{" "}
</td>{" "}
</tr>{" "}
</table>{" "}
</div>
)}
</div>
);
}
})}{" "}
</div>{" "}
</div>

Answer 1

我建议以下两种方法之一：

• 创建一个 React 组件，用于封装集合中项的呈现，包括是否选择了该项。
• 或者，创建两个不同的组件来封装">选定"和非"选定"项目的绘制方式。

因此，您将对集合运行 map 函数，为集合中的每个项调用 React 组件。在上述任一情况下，您都需要将 selected={true} 或 selected={false} 属性传递给组件，或者根据是否选择了正在映射的当前项来调用正确的组件。

如果选定项和非选定项在外观上存在大量重叠，或者其中一个项主要是另一个项的子集，则单组件方法最有意义。即使您采用单独的组件方法，并且一个是另一个组件的子集，您也始终可以在一个组件中呈现该子集，并将其包含在超集的呈现中。

Answer 2

您必须使用元素的 id 来区分选择和非选择元素，我做了一个例子，你可以看看 https://codesandbox.io/s/selecting-single-element-from-map-npkb6?file=/src/App.js