Question

你好，我有一个Json对象，我正在使用.map遍历数据并根据需要传递信息作为道具。问题是我有一个来自reactstrap的模式，我正在使用该ide来在单击后显示道具。相反，在单击我的模态后，当我只需要Ive作为道具传入的每个受尊重的数据时，它将显示所有迭代的数据。

<article className={props.className}>
  <div className="title"><span>{props.titleA}</span></div>
    <div className="content-overlay"></div>
      <img className="content-image gridImg" src={props.storyA} alt="News-Story-Left" />
        <TimeAgo className="timeStamp" datetime={props.time} />
          <div>
            <div className="content-details fadeIn-bottom fadeIn-right">
              <button className="btn btn-primary" onClick={props.click}>Read Full Story</button>
                <Modal 
                  show={props.A} 
                  onHide={props.B} 
                  dialogClassName="modal-90w"aria-labelledby="example-custom-modal-styling-title">
                    <Modal.Header closeButton>
                    <Modal.Title id="example-custom-modal-styling-title">{props.header}</Modal.Title>
                    </Modal.Header>
                  <Modal.Body><p>{props.snippet}</p></Modal.Body>
                </Modal>
              </div>
          </div>
    </article>
  </div>

这是Im用于显示我需要的信息的组件。无论我在浏览器中单击哪个项目，props.header和props.snippet都会在其中显示所有迭代数据。

<div className="grid-container">
  {topHeadlines.slice(0,13).map((item1, index) =>
      <Grid key={index}
      className={index}
      titleA={item1.title}
      storyA={item1.urlToImage}
      time={item1.publishedAt}
      click={this.handleShow}
      A={this.state.show}
      B={this.handleHide}
      header={item1.description}
      snippet={item1.content}
    />)
  }
</div>

数据迭代

反应将唯一数据映射到唯一div

0 个答案: