如何使用 API 中的数据创建第二个响应组件并创建动态 URL答案

【问题标题】：How to create a second component on react using the data from the API and create a dynamic URL如何使用 API 中的数据创建第二个响应组件并创建动态 URL
【发布时间】：2020-01-14 01:25:13
【问题描述】：

我有一个显示博客文章列表的组件，我为来自标题的每个文章创建了一个 URL，将其转换为字符串，然后拆分和连接，但我需要创建第二个组件来呈现博客文章本身的页面, 我的问题是，有没有办法将状态或道具从已创建的列表组件传递到 blogpost 组件，并且只能通过该路由 URL 访问？

这是我想用来将状态传输到其他组件的 blogdata 组件，但只有一个在工作，从 API 获取数据到 this.state.blogpost

class BlogData extends Component{
   state = {
        blogData: []        
    }
    componentDidMount() {
        axios.get(`data.json`)
          .then(res => {      
            const blogData = [res.data.blogPosts]       ;
            this.setState({blogData});                        
          })          
    };
    render(){
        const blogData = this.state.blogData.map((value) =>
            value.map((val, idx) =>                                                       
                <BlogBlock 
                    link={val.title.toString().toLowerCase().split(" ").join("-")} 
                    title={val.title}
                    subtitle={val.subtitle}
                    thumb={val.thumb}
                    idx={idx}
                />

            )
        )            
        return( 
            <section id="blog" className="blogList">
                <h2>From the Blog</h2>
                <div className="blogPosts">   
                    {blogData}              
                </div>            
            </section>
        )
    }    
}

const BlogBlock = (props) => {                
    return (
        <div className={`blog-post post-${props.idx}`}>
            <Link to={props.link}>
                <Img loader={<span className="loading-img">loading....</span>} src={`http://brittdepetter.com/images/${props.thumb}`} alt={props.title} />
                <h3>{props.title}<span><br />{props.subtitle}</span></h3>
            </Link>  
        </div>                        
    )   
}

我试图创建但不工作的组件就是这个，但没有锁定使路线工作:(

const BlogPost = (props) => {                                         
    return (                                           
        <div>    
            <Router path={props.link} />            
            <Title title={props.title } />                                             
            <div className="textBox boxImg">
                <div className="story-img-box">
                    <Img src={props.imgsrc } />                            
                </div>            
                <div>
                   <Paragraph body={props.body} />
                </div>
            </div>
        </div>                                
    )   
}

【问题讨论】：

标签： reactjs react-router components state

【解决方案1】：

有一种方法可以在 Link 上传递一个额外的参数。为此，您应该将 to 属性作为对象而不是字符串传递。更改您的链接

<Link to={props.link}>

到

<Link to={{pathname:props.link, blog:props}}>

在您的 BlogPost 组件中，使用以下代码访问

this.props.location.blog

PS。在使用 BlogPost 组件时刷新浏览器将需要再次重新获取博客。

【讨论】：