时间戳

首页 > 解决方案 > 如何从地图功能中仅选择一个元素？

reactjs - 如何从地图功能中仅选择一个元素？

问题描述

我正在使用地图功能在页面中呈现许多事件。当我点击一个事件时，我应该会在该事件下方看到该事件的描述。目前，我想要的事件的描述出现在地图上的每个事件中，这很糟糕。

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

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

标签： reactjs

解决方案

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

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

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

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

推荐阅读