javascript - JS - React：从收藏夹中添加/删除

Question

我是反应的初学者，目前，我正在尝试在收藏夹列表中实现“添加/删除系统”。当相关元素已经在收藏夹列表中时，我希望在“地图”内的按钮显示为黄色，或者当它不在收藏夹列表中时显示为灰色。我的代码如下所示：

favoriteList is an array
...
elements.map(
      element =>
        !element.isOpen && (
          <div className="col-xl-12 col-lg-12" key={element.id}>
            {element.questions
              .slice(currentPage - 1, currentPage)
              .map((question, i) => (
                <div className="card shadow mb-4" key={question.id}>
                  <div className="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 className="m-0 font-weight-bold text-primary">
                      Question N° {currentPage} of {element.questions.length}
                    </h6>
                    <a
                      onClick={() => saveOrDeleteFavorite(element.id)}
                      title="Add to favorite"
                       //(1)
                      <i className="fas fa-star fa-sm fa-fw fa-2x"></i>
                    > .........

所以在（1）中，我想为星形图标设置不同的颜色，关于“元素”是否已经在“favoriteList”中。此外，“已经存在”的信息对于我在点击星号时调用的函数 saveOrDeleteFavorite(element.id) 很有用。

我希望我很清楚，并提前感谢您的帮助。

标签： javascriptreactjsjsx