javascript - 将数据传递给 React 中的 "deeper down"组件

Question

首先。对不起我的标题，我已经考虑了十多分钟我要命名我的问题。但是我什么也没得到..

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

我有:

1. Doors.js
2. DoorsItem.js
3. DoorsDetails.js

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

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

我在这里创建了一个名为 DoorsItem 的新元素它的 Prop 等于 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在顶部，我可以访问所有不同类型的 Prop 。喜欢item.address.street即

地址:<Link to={/日志/${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 props 是未定义的，我得到它是因为我传入了 match在这里是因为这就是 React 路由器 V4 的工作方式(我基于互联网呵呵呵呵)。

问题:

所以我的问题是如何访问我的 item props 这样我就可以开始渲染非静态数据了。喜欢item.address.street .

匹配:

Answer 1

您需要将您的链接更改为如下内容:

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

阅读文档后更新:

然后在您的组件中添加一个新的 Prop 位置:

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

试试看，如果效果更好，请告诉我。