Question

我正在使用Hacker News API，现在可以使用这样的URL中的故事ID链接到我的Comments.js

export default function Story ({storyID}) {

const [story, setStory] = useState({});

 useEffect(()=> {

    getStoryTitle(storyID).then(data => data && data.url && setStory(data));
 });

    const kids = story.kids ? story.kids: [];
     const author = story.by;
        return (

          <div className="story-wrapper">

             <a className="a-tag" href={story.url}>
               <p className="story-title">{story.title}</p>
             </a>
             <p className="story-author"><strong>By: {story.by}</strong> on {timeFormat(story.time)}</p>
             <p className="story-comments"><Link to={`/comments/${storyID}`}>{kids.length}</Link> Comments</p>
             {

编辑：我有这样的Comments.js

    import React, {useState, useEffect} from 'react'
import {getStoryTitle} from '../API.js'
const {comment}
export default function Comments({storyID}) {
    const [comment, setComment] = useState({});


    useEffect(()=> {
        getStoryTitle(storyID).then(data => setComment(data))
    }, [])

    return (
        <ul>
            <li>{storyID}</li>
        </ul>
    )
}

我需要知道如何在Comments.js组件中呈现数据，这类似于我使用URL上传递的prop处理故事标题和作者的方式。

Answer 1

match

鉴于评论路由路径已定义为path="/comments/:commentId"，请从match道具访问ID。

this.props.match.params.commentId

location

如果您需要通过路由推送发送状态，它会以链接的to属性作为对象发送，指定要发送到新路由的pathname和state。

to={{ pathname: `/comments/${storyID}`, state: { data } }}

通过location道具进行访问。

this.props.location.state.data

数据可以是任何有效的对象有效载荷

修改

假设Comments如此呈现：

<Route path="/comments/:id" component={Comments} />

然后从收到的id道具中拆开match的包装：

import React, { useState, useEffect } from 'react';
import { getStoryTitle } from '../API.js';

export default function Comments({ match }) {
  const { id } = match.params;
  const [comment, setComment] = useState({});

  useEffect(()=> {
    getStoryTitle(id).then(data => setComment(data));
  }, []);

  return (
    <ul>
      <li>{id}</li>
    </ul>
  );
}

Answer 2

<Link to={{
  pathname: `/comments/${storyID}`,
  state: {
    yourData: 'fooBar'
  }
}}>{kids.length}</Link>

并在您的组件内部要呈现数据：

const { yourData} = this.props.location.state

React：如何从React Router的<Link />传递道具？

2 个答案: