重定向onclick时如何动态更改url？反应

Question

如何动态地更改网址？这个 url 'www.example.com' 会根据我使用它的位置而变化，如下所示，查询字符串也会根据组件和卡 ID 发生变化。

这是我的代码的简单示例：

return (
props.news.map((content, index) =>
<NewsCard 
key={index}
title={content.title}
text={content.text}
onClick={() => {
location.href = 'www.example-news.com/?a=query';
}}
/>
<JurnalistCard
key={index}
person={content.person}
name={content.name}
onClick={() => {
location.href = 'www.example-jurnaist.com/?a=query';
}}/>
))

Json 文件：

export const news: News[] = [
  {
        title: 'Title1',
        text: 'Text test',
        queryString1: 'queryString',
        queryString2: 'queryString',
        person: 'Full Name',
        name: 'John'
  },
 {
        title: 'Title1',
        text: 'Text test',
        queryString1: 'queryString',
        queryString2: 'queryString',
        person: 'Full Name',
        name: 'John'
  },
 {
        title: 'Title1',
        text: 'Text test',
        queryString1: 'queryString',
        queryString2: 'queryString',
        person: 'Full Name',
        name: 'John'
  }
]

我是 React 新手，请帮忙。

Answer 1

您可以在 props 中发送 url 并执行类似的操作

return (
    props.news.map((content, index) =>
    <NewsCard 
        key={index}
        title={content.title}
        text-{content.text}
        onClick={() => {
            location.href = content.newsUrl;
        }}
     />
     <JurnalistCard
         key={index}
         person={content.person}
         name={content.name}
         onClick={() => {
             location.href = content.journalistUrl;
     }}/>
 ))

如果您无法将 url 存储在 props 中并且您使用其他值来形成查询，您可以这样构造它：

{"'www.example-news.com/?a=" + content.title}