Question

首先。对我的头衔感到抱歉，我一直在思考我将要提出的问题超过十分钟。但是我什么也没得到，但是......

在我的应用程序中，我有三个基本上属于彼此的组件。

我有：

Doors.js
DoorsItem.js
DoorsDetails.js

所以，在Doors.js我有这行代码：

const items = dataToDisplay.map(item => <DoorsItem item={item} />)

在这里，我正在创建一个名为DoorsItem的新元素，其道具等于item。

在我的DoorsItem.js我有这个：

const DoorsItem = ({ item }) =>
  <Grid>
    <Row key={item._id} className="show-grid">
      <Col md={12}>

        <ul style={{ marginTop: '10px' }}>
          <li className="info-container">
            <h4 className="title-text-container">{item.address.street}</h4>

            <a
              className="sub-title-text-container"
              style={{
                fontWeight: '300',
                textDecoration: 'underline',
                marginLeft: '500px'
              }}
            >
              Lägg till ny användare
            </a>

            <Link to={`/log/${item._id}`}>
              <p
                className="sub-title-text-container"
                style={{
                  fontWeight: '300',
                  textDecoration: 'underline'
                }}
              >
                Se logg
              </p>
            </Link>
             //etcetc

因为我在顶部传递item，所以我可以访问所有不同类型的道具。像item.address.street，即

在：<Link to={ / log / $ {item._id} }>我根据ID链接到特定路径。一切都很棒！然而… 当我越来越深入兔子洞（DoorDetails.js）时，我得到了这个：

const DoorDetails = ({ match }) => {
  // console.log(item) Undefined!!!
  return (
    <div>
      <MainNavbar />
      <Grid>
        <Row className="show-grid">
          <Col md={12}>
            <h1 className="text-center">Sätraängsvägen 12</h1> // Need non-static-address here :p
          </Col>
        </Row>

我的item道具是未定义的，我得到的是因为我在这里传递了match，因为这就是路由器 V4 的反应方式（我基于互联网hehehe））。

问题：

所以我的问题是如何访问我的item道具，以便我可以开始渲染非静态数据。与item.address.street一样。

匹配度：

Answer 1

您需要将链接更改为以下内容：

 <Link to={{
    pathname: '/some-link',
    state: { item: someItem, blah: someotheritem }
}}/>

阅读文件后更新：

然后在您的组件中添加一个新的道具位置：

const DoorDetails = ({ match, location }) => {
     const item = location.state.item;
     ...
}

尝试一下，让我知道它是否更好。

将数据传递到React

问题：

1 个答案: