【问题标题】:Adding a dynamic link添加动态链接
【发布时间】:2019-04-03 03:32:45
【问题描述】:

我想添加一个新的链接如下

反应片段 li key ={props.items.Poster} img src={props.items.Poster} alt={props.items.Title} li li key={props.items.Title}>{props.items.Title} li li key={props.items.Year}>{props.items.Year} li 反应片段

在上面的代码中,我想在图片标签周围添加一个链接。我想连同一些参数一起重定向到另一个页面,以便我可以将它们用作另一个页面中的道具。谁能告诉我该怎么做?

【问题讨论】:

  • 通过另一个页面的props,你的意思是通过查询参数将数据传递到另一个页面吗?
  • 嗨@DacreDenny是的,让我们这么想吧:)

标签: reactjs react-router


【解决方案1】:

如果我理解正确,那么您可以通过执行以下操作来实现您的要求:

render() {

    /* Construct href from props data, pass data to new page via query string */
    const { items } = this.props;
    const url = 'someUrl';
    const href = `${ url }?title=${ items.Title }&year=${ items.Year }`;

    /* Wrap img with link and pass dynamically computed href */
    return <React.Fragment>
        <li key ={props.items.Poster}>
            <a href={ href }> 
                <img src={props.items.Poster} alt={props.items.Title}/>
            </a>
        </li>
        <li key={props.items.Title}>{props.items.Title}</li>
        <li key={props.items.Year}>{props.items.Year}</li>
    </React.Fragment>
}

【讨论】:

  • 感谢@Darce 的建议。如果我想重定向到另一个组件以及用作道具的查询参数。
  • 对于这种情况,我建议客户端路由。有许多好的声明式路由库可以用于反应,例如 npmjs.com/package/react-router-dom
  • 谁能举例说明上述情况?
  • 使用react-router-dom ?
  • 当然 - 您可以包含您希望链接显示的组件的详细信息吗?
猜你喜欢
  • 1970-01-01
  • 2011-08-26
  • 2011-01-24
  • 1970-01-01
  • 2016-03-15
  • 2012-03-05
  • 1970-01-01
  • 2018-09-24
  • 2012-10-28
相关资源
最近更新 更多