首先。对不起我的标题,我已经考虑了十多分钟我要命名我的问题。但是我什么也没得到..
在我的应用程序中,我有三个基本属于彼此的组件。
我有:
-
Doors.js
-
DoorsItem.js
-
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
.
最佳答案
您需要将您的链接更改为如下内容:
<Link to={{
pathname: '/some-link',
state: { item: someItem, blah: someotheritem }
}}/>
阅读文档后更新:
然后在您的组件中添加一个新的 Prop 位置:
const DoorDetails = ({ match, location }) => {
const item = location.state.item;
...
}
试试看,如果效果更好,请告诉我。
关于javascript - 将数据传递给 React 中的 "deeper down"组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45223440/