Javascript 如何将参数传递给其他组件，以便在react.js中单击按钮时显示API列表的详细信息

我是新手。我制作了一个列表视图，其中显示了帖子列表。我有一个按钮，它会将我带到另一个组件/页面，我想在上面显示该帖子的评论。 如何将postId传递给其他组件？以及如何将该id传递给API服务以显示注释详细信息

这是代码。这是postComponent，现在我想将post.id传递给commentComponent，我想在ShowComments按钮上加载该页面

我正在使用axios获取数据

state = {
  posts: []
}

componentDidMount() {
  axios.get(`https://jsonplaceholder.typicode.com/posts`)
    .then(res => {
      const posts = res.data;
      this.setState({ posts });
    })
}
render() {
 return (
  <div className="userlist">
  <ul>
    { this.state.posts.map((post , index) =>
      <li key={post.id}>
        <div className="user_name"><span>Post:</span> {post.title}</div>
        <div className="user_usernamename"><span>Details:</span>{post.body}</div>
        <div className="actionButtons">
          <button>Show Comments</button>
          <button>Flag</button>
        </div>
      </li>
  )}
  </ul>

  </div>

  )
 }

状态={
员额：[]
}
componentDidMount（）{
axios.get(`https://jsonplaceholder.typicode.com/posts`)
。然后（res=>{
const posts=res.data；
this.setState（{posts}）；
})
}
render（）{
返回(

{this.state.posts.map（（post，index）=>

帖子：{Post.title}
详细信息：{post.body}
显示评论
旗帜

)}

)
}

谢谢。

使用react router dom并创建一个功能，该功能将在按钮单击时触发，并将您带到另一个页面，您将在该页面中放入将获取数据的componentWillMount（或componentDidMount）中的axios调用

---

帖子的Id将作为触发函数的参数传递给react router dom

您可以通过添加onclick事件并向其附加处理程序来实现这一点。 然后您可以将该处理程序绑定到

this

和

post.id

请在此处阅读更多信息：

无论何时单击帖子，都会调用此处理程序，您可以在此处内部处理axios的调用，或者如果您的

CommentComponent

位于父文件中，则您可以通过道具弹出单击，让父组件进行API调用，并最终显示注释

大概是这样的：

state = {
  posts: [],
  comments: [],
  showComments: false
}

componentDidMount() {
  axios.get(`https://jsonplaceholder.typicode.com/posts`)
    .then(res => {
      const posts = res.data;
      this.setState({ posts });
    })
}

handleCommentClick (postId) {
 // Either set the state and then do a conditional rendering
 // or handle this change in the parent component

 // if handled in parent component
 this.props.handleCommentClick && this.props.handleCommentClick(postId); 

 // If handling it here then..
 // First make the API call using axios
 axios.get(`https://jsonplaceholder.typicode.com/comments/${postId}`)
  .then(res => {
    this.setState({
      comments: res.comments,
      showComments: true
    });
  });
}

render() {
 return (
  <div className="userlist">
  <ul>
    { this.state.posts.map((post , index) =>
      <li key={post.id}>
        <div className="user_name"><span>Post:</span> {post.title}</div>
        <div className="user_usernamename"><span>Details:</span>{post.body}</div>
        <div className="actionButtons">
          <button onClick={this.handleCommentClick.bind(this, post.id)}>Show Comments</button>
          <button>Flag</button>
        </div>
      </li>
  )}
  </ul>
  {
    // Whenever show comments is made true, this component will render
    showComments &&
      <CommentsComponent comments={this.state.comments} />
  }

  </div>

  )
 }

状态={
员额：[]，
评论：[]，
showComments:错误
}
componentDidMount（）{
axios.get(`https://jsonplaceholder.typicode.com/posts`)
。然后（res=>{
const posts=res.data；
this.setState（{posts}）；
})
}
handleCommentClick（postId）{
//设置状态，然后执行条件渲染
//或者在父组件中处理此更改
//如果在父组件中处理
this.props.handleCommentClick&&this.props.handleCommentClick（postId）；
//如果在这里处理的话。。
//首先使用axios进行API调用
axios.get(`https://jsonplaceholder.typicode.com/comments/${postId}`）
。然后（res=>{
这是我的国家({
评论：res.comments，
showComments：对
});
});
}
render（）{
返回(

{this.state.posts.map（（post，index）=>

帖子：{Post.title}
详细信息：{post.body}
显示评论
旗帜

)}

{
//每当“显示注释”为真时，此组件将渲染
表演评论&&
}
)
}

CommentsComponent的外观如何？我现在还没有在commentsComponent中进行任何实现。即使您还没有实现它，也没关系。单击每个列表项时将加载注释。您的

评论组件将在其道具中接收评论。在
comments组件的渲染功能中
可以执行
this.props.comments.map
并像渲染上面的帖子一样渲染它。它显示了this.props.comments的未定义。我是这样做的。评论组件让评论；log（this.props.comments）；如果（this.props.comments）{comments=this.props.comments.map（comment=>{return（
comment.email
）}）return（{comments}），可能有问题。我不能这样调试它。你能在JSFiddle或JSFiddle上做一个项目吗？