React:如果链接包含一个域，则添加一个变量

Question

我正在ReactJS中构建一个web应用程序，需要在其中显示一些链接。

其中一些链接应该结束宽度一个ID代码和其他

示例：

https://www.example.com/lorem&[ID-CODE1]
https://www.other.com/lorem&[ID-CODE2]

我只需要为两个不同的域做这件事。

我的代码是这样的：

link={type.content?.url}

但应该是

link={type.content?.url}&[ID-CODE1] or &[ID-CODE2]

我希望这个解释听起来不要太神秘，你们可以帮助我，请

Answer 1

你的意思是这样的吗？

function constructURLQuery(url, code) {
return `${url}/?lorem&id=${code}`
}
const LinkComponent = (props) => (
<a href={props.link} title={props.title}>{props.link}</a>
)
const ListComponent = (props) => (
<ul>
{props.links.map(({ id, title, url, code }) => (
<li key={id}>
{title}: <LinkComponent link={constructURLQuery(url, code)} title={title}/></li>
))}
</ul>
)
const links = [
{ id: 1, title: 'example', url: 'https://www.example.com', code: '[ID-CODE1]' },
{ id: 2, title: 'other',  url: 'https://www.other.com' , code: '[ID-CODE2]'},
]
const App = (<ListComponent links={links} />)
ReactDOM.render(
App,
document.getElementById("app")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>