Question

如何在单击时将数据从一个反应组件传递到另一反应组件

[
 {
  "id": 1,
  "title": "XYZ Title",
  "body": "www.xyz.com sample hits",
  "comments": [
   {
    "id": 1,
    "postId": 1,
    "name": null,
    "email": "abc@cc.com",
    "body": "very simple body"
   }
 ]
}
]

我有两个JSX页面，一个用于帖子，第二个JSX页面用于评论。点击帖子时，需要浏览该帖子的评论页面。请参见以下代码段。 Posts.jsx

<tbody>
{posts.map((post) => (
<tr key={post.id}>
<td>
<Link
to={`/posts/${post.id}`}
>
{post.title}
</Link>
</td>
<td>{post.body}</td>

我们如何获取和迭代有关给定帖子ID的相关评论数据（单击帖子ID的链接时）。当单击posts.id的post.id时如何将posts.jsx的注释数据传递到comments.jsx

Comments.jsx

 <tbody>
{comments.map((comment) => (
<tr key={comment.id}>
<td>{comment.name}</td>
<td>{comment.email}</td>
<td>{comment.body}</td>

Answer 1

您可以像这样传递数据：

<Link to={{
  pathname: `/posts/${post.id}`,
  state: post // <---- Pass post object here
}}>{post.title}</Link>

并通过location获取组件内部的访问权限：

// class based component
const post_data = this.props.location.state; // <--- get access to post object

// for functional based component
let location = useLocation()
const post_data = location.state;

Answer 2

您可以在<Link to={{pathname: something, props: something}} />中传递道具在目标组件上使用props.location.state到useLocation() hook或withRouter HOC。此外，您可以在URL上传递道具以重新加载，不要丢失它们。

单击<Link tag时如何将数据从一个反应组件传递到另一反应组件

2 个答案: