Question

我快到了，但是仍然无法发送数据给我。

我有一个数据组件，用于呈现博客文章列表以及我的针对索引和标题的路由器

//Blockblock.js
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}
                />            
            )
        )  

//Blockblock.js
const BlogBlock = (props) => {                
    return (
        <div className={`blog-post post-${props.idx}`}>            
            <Link to={`blog/${props.idx}/${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>                        
    )   
}
//app.js
<Route path='/blog/:blogId/:blogTitle' component={BlogPost} />

最后我有了我的blockpost组件，我要匹配URL，但是如何传递道具来渲染图像等数据呢？

BlockPost.js
const BlogPost =({match, location}) => {                   
    const { params:{ blogId, blogTitle } } = match;
    return (                          
        <div>                                        
            <h2>{ props.title }</h2> 
            <div className="textBox boxImg">
                <div className="story-img-box">
                    { props.imgsrc }
                </div>            
                <div>
                    {console.log(props)}
                    {props.body}
                </div>
            </div>
        </div>            
    )   
}
```

Answer 1

如果您尝试将其他道具从BlogBlock传递到BlogPost，那么没有Redux这样的状态管理，这两个组件都可以使用共享状态，这是不可能的

我建议您根据blogId组件内的BlogPost重新获取您的博客，因为您需要处理直接访问（如果用户通过将其输入来直接导航至/blog/:blogId/:blogTitle网址，而不是BlogBlock的网址）。另一种选择是仅在直接访问的情况下才进行重新提取，否则请使用共享状态下的数据（基于从BlogBlock进行的选择，该数据将存储在该状态下）。

Answer 2

我认为这取决于您从何处获取数据（img等）

您可以使用React组件，并利用生命周期方法，尤其是componentDidMount（）。看一下我提供的链接，我认为这会有所帮助。

https://reactjs.org/docs/state-and-lifecycle.html

（反应）动态网址，无法呈现我想要的数据

2 个答案: