单击卡片时如何路由到具有特定卡片详细信息的页面？答案

【问题标题】：How to route to a page with specific card details when clicking on a card?单击卡片时如何路由到具有特定卡片详细信息的页面？
【发布时间】：2019-07-17 20:21:10
【问题描述】：

我的卡片有来自 JSON 文件的信息。卡片都正确呈现，但我想为每张呈现的卡片添加一个 onClick 函数，以重新路由到我称为paintingInfo.js 的另一个页面。在这个 paintingInfo 文件中，我想显示 JSON 文件中的图像以及描述。有人可以帮助我吗，对 React 来说相对较新。

class Paintings extends Component {
  state = {
    cardInfo: [...cardInfo]
  };

  render() {
    return (
      <React.Fragment>
        <Navbar className="navCustom d-flex justify-space-between" bg="light" variant="light">
          <Navbar.Brand href="/">SNR Arts</Navbar.Brand>
          <Nav className="ml-auto navCust">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/paintings">Paintings</Nav.Link>
            <Nav.Link href="/contact">Contact</Nav.Link>
          </Nav>
        </Navbar>
        <div className="container-fluid">
          <div className="row align-items-center justify-content-between">
            {/* print out cards here */}

            {this.state.cardInfo.map(card => {
              return (
                <div className="col-12 col-sm-3 col-md-2 my-3" key={card.id}>
                  <img
                    src={card.image}
                    alt={card.name}
                    className="img-fluid img-thumbnail rounded indvCard bg-dark"
                  />
                </div>
              );
            })}
          </div>
        </div>

【问题讨论】：

标签： reactjs

【解决方案1】：

我首先想到以一种不需要大修的简单方式来做这件事，就是在类中定义一个名为 moreInfo(id) 的方法。

然后在.map里面的render中，就像你给图片src、alt、className属性一样，可以给它onClick={this.moreInfo(card.id}}。我不是100%确定这是否行得通，但我很有信心它会。

我倾向于亲自构建它的方式是在 .map 的 return 语句中制作内容并用它制作一个组件。所以会是

{this.state.cardInfo.map(card => (
<CardComponent 
props
props
props
props />
))}

编辑：在第二次通读时，我意识到我没有给出任何实际的渲染逻辑。我对那一半问题的想法是在同一个组件中呈现 moreInfo 。在您的状态中保留一个布尔值以跟踪是否已扩展更多信息。在引用该布尔值的 render() 方法中放置一个三元运算符。将渲染方法的当前内容放在三元组的一侧，让另一侧显示附加信息。

第二次编辑：为提议的 .map 函数添加代码块，由于标记，其中一些没有显示在显示中。

【讨论】：