(реагировать) Динамические URL-адреса, не может отображать данные, которые я хочу

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, вводя его в URL, а нес BlogBlock) все равно.Другим вариантом является повторное получение, только если это был прямой доступ, в противном случае используйте данные из общего состояния (на основе выбора из BlogBlock, который будет храниться в этом состоянии).

Answer 2

Я думаю, это зависит от того, откуда вы получаете данные (img и т. Д.) От

. Вы можете использовать React Component и воспользоваться преимуществами методов жизненного цикла, в частности componentDidMount ().Посмотрите на ссылку, которую я предоставил, я думаю, это будет полезно.

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