尝试创建单独的React组件，该组件接受道具，并在新窗口中从这些道具返回动态谷歌搜索

Question

我已经掌握了这方面的大部分逻辑。我遇到的问题是，我在应用程序的两个不同位置有两个几乎相同的功能。

该逻辑采用学校名称和管理员的名字和姓氏，并创建一个谷歌搜索链接。该链接以href的形式封装在管理员的名称周围，然后在用户单击该名称时执行，在新选项卡中打开搜索结果。

本着DRY和可重复使用的精神，我试图提取逻辑，使其足够通用，以便我可以将学校和联系方式作为道具传递进来，并从应用程序中的任何地方生成相同的链接，但我对如何做到这一点感到困惑。

下面是我目前正在构建的组件，以及应用程序中具有类似逻辑的功能。

Component Being Built

import React from 'react'
import styled from '../../styles/styled';
import { generateGoogleSearchLink } from '../google-search';

type Props = {
children: React.ReactNode
};
const GoogleSearch = (props: Props) => {
const handleNameClick = (school, contact) => {
if (!contact || !school) {
return;
}
const url = generateGoogleSearchLink([
contact.firstName,
contact.lastName,
contact.role,
school.schoolName
]);
window.open(url, '_blank');
};

return (
<>
<NameContainer onClick={() => handleNameClick(school, data.primaryContact)}>
{children}
</NameContainer>
</>
)
}
export default GoogleSearch
const NameContainer = styled('span')({
color: '#676767',
fontSize: '1em',
fontWeight: 'bold',
cursor: 'pointer',
textDecoration: 'underline'
});

Current Function logic

return (
...
<>
<NameContainer onClick={() => handleNameClick(school, data.primaryContact)}>
{formatEmptyString(`${data.primaryContact.firstName} ${data.primaryContact.lastName}`)}
</NameContainer>
</>
)

Answer 1

首先，我建议您尽可能地使用真实的HTML；并为此使用锚点标记，而不是自定义单击事件。所以你想指定

const NameContainer = styled('a')({
...

因此，您需要将其呈现为

<NameContainer to={{url}}>

其中url是使用generateGoogleSearchLink生成的内容，本质上是一些https://google.com/search?q=john+doe+teacher+MIT。

除此之外，我还不完全理解你的问题？这似乎很普通？