next.js 如何传递图标作为 prop ？

xzlaal3s 于 2023-01-20 发布在其他

关注(0)|答案(2)|浏览(127)

我正在使用 prop ，我希望“optionText”和“optionIcon”是我能够添加的第一个，但我无法将图标实现为 prop
创建 prop 的文件

import Icon from "@mui/material/Icon";

function HeaderMenuOptions({ optionText, OptionIcon }) {
  return (
    <div className="flex items-center text-center">
      <Icon>{OptionIcon}</Icon>
      <h1 className="py-1 my-1 hover:bg-menu-option-hover hover:text-black cursor-pointer">
        {optionText}
      </h1>
    </div>
  );
}

export default HeaderMenuOptions;

我在哪里使用这些 prop

<div className="absolute left-72 top-3 rounded-md bg-section w-[10rem] text-center">
          <p className="menu-header mt-2">VIEW OPTIONS</p>

          <div className="flex items-center justify-center space-x-2 mr-2 cursor-pointer hover:bg-menu-option-hover hover:hover:text-black group">
            <HeaderMenuOptions optionText="Night Mode" />
            <CheckBoxIcon
              defaultChecked
              onClick={() => alert("Light mode has not been added yet!")}
              className="cursor-pointer text-blue-500"
            />
          </div>

          <p className="menu-header">MORE STUFF</p>
          <HeaderMenuOptions optionText="Premium" OptionIcon={SecurityIcon} />
          <HeaderMenuOptions optionText="TEST" />
          <HeaderMenuOptions optionText="TEST" />
          <HeaderMenuOptions optionText="TEST" />
          <HeaderMenuOptions optionText="TEST" />
        </div>

有人能帮帮我吗？谢谢

next.js

来源：https://stackoverflow.com/questions/70124026/how-to-pass-an-icon-as-a-prop

2条答案

按热度按时间

qmb5sa221#

HeaderMenuOptions看起来很好。您需要更改父组件。
你可以做这样的事。

<HeaderMenuOptions optionText="Premium" OptionIcon={<SecurityIcon />} />

赞(0）回复(0）举报 2023-01-20

ztmd8pv52#

可以使用传递图标作为JSX.Element从ParentComponent传递到TargetComponent，如下所示：

import AddAlertIcon from '@mui/icons-material/AddAlert';
...

const ParentComponent=()=>{
return(
....
<TargetComponent icon={<AddAlertIcon />}>
....
)
}

const TargetComponent = (props: Props) => {
return(
<span>
{props.icon}
</span>
);
}

export type Props= {
  icon:  JSX.Element;
};

赞(0）回复(0）举报 2023-01-20

我来回答

next.js 如何传递图标作为 prop ？

2条答案

相关问题

热门标签

最新问答