Question

我的卡中的信息来自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>

Answer 1

以一种不需要大修的简单方式来实现此目的，我首先想到的是在类moreInfo（id）的内部定义一个方法。

然后在渲染器内的.map中，就像您为图像赋予src，alt和className属性一样，您可以为其赋予onClick = {this.moreInfo（card.id}}。我不是100％确定这是否可行，但我对此很有信心。

我倾向于个人构建此方法的方法是将内容放入.map的return语句中，并从中制作一个组件。这样吧

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

编辑：在我的第二次通读中，我意识到我没有提供任何实际的渲染逻辑。我对一半问题的想法是在同一组件内呈现moreInfo。将布尔值保持在您的状态以跟踪更多信息是否已扩展。将三元运算符放在引用该布尔值的render（）方法中。将您的render方法的当前内容放在三元数的一侧，并让另一侧显示其他信息。

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

单击卡时如何转到具有特定卡详细信息的页面？

1 个答案: