Question

我非常非常新的反应和减少到我正在慢慢地试图解决它的问题。为了变得更好，我正在尝试做一个小项目，比如说我制作了一个下拉组件，我可以在其他地方使用它，并且在它可以在网站的任何地方使用的意义上都是通用的。我这样做是一种非通用的方式，但认为超时是一个通用的组件会很好。我遇到麻烦的通用的有3个参数传递到列表中，它们作为字符串返回。我知道如何做到这一点，但在如何正确显示和显示数据方面遇到了麻烦。

我在这里复制了以下代码。

export const Dropdown = ({
  link,
  iconName,
  itemName,
}: {
  link: string
  iconName: string
  itemName: string
}) => {
   return (
    <a href={link}>
     <FontAwesomeIcon fixedWidth icon={iconName} />
    <span className="Drop_Down_List_Item">{itemName}</span>
    </a>
  ) }

以下是我想要的下拉列表的详细信息。

const Drop_Down_Details = { 
             Header: { 
                link: '' ,
                iconName:'{faTHLarge}' ,
                itemName: 'ProgrammingLanguages' ,
             }
          }

非常感谢您解释这是如何工作的以及下一步该做什么的例子，我很感激。

Answer 1

这就是我要帮助你：

您需要在下拉列表中添加选项或菜单列表，使用您提供的课程，您可以将其作为数组添加为道具。说：

export const Dropdown = ({
  links : Drop_Down_Details[]
})

然后您可以在渲染方法中使用map函数在下拉列表中显示它们，如下所示：

<div>
  {this.props.links.map(link => ( 
    <a href={link.link}>{link.ItemName}</a>
  ));}
</div>

你可以看一下这个例子：https://github.com/fraserxu/react-dropdown 这是他的代码：https://github.com/fraserxu/react-dropdown/blob/master/index.js

编写一个接受3个参数的通用组件？

1 个答案: