React-列出具有不同引數的圖示-有解無憂

我正在嘗試使用地圖功能，但無法正確使用。我有一個側邊欄，我想顯示一些圖示。這是一個沒有地圖的例子。

    const SideBar = () => {

    return (
        <div className="fixed top-0 left-0 h-screen w-20 m-0 flex flex-col bg-gray-100 text-white shadow-lg">
            <SideBarIcon icon={<FaFire size="30" />} />
            <SideBarIcon icon={<FaPoo size="30" />} />
        </div>
    );
};

const SideBarIcon = ({ icon, text = "tooltip ??"}) => (
    <div className="sidebar-icon group">
        {icon}
        <span class="sidebar-tooltip group-hover:scale-100">{text}</span>
    </div>
);

這是地圖功能的示例

const SideBar = () => {
    const icons = [FaFire, FaPoo];

    return (
        <div className="fixed top-0 left-0 h-screen w-20 m-0 flex flex-col bg-gray-100 text-white shadow-lg">
            {icons.map(function(icon) {
                return <SideBarIcon icon={<icon size="30"/>}/>
            })}
        </div>
    );
};

const SideBarIcon = ({ icon, text = "tooltip ??"}) => (
    <div className="sidebar-icon group">
        {icon}
        <span class="sidebar-tooltip group-hover:scale-100">{text}</span>
    </div>
);

你能告訴我我做錯了什么嗎？感謝您的時間！

uj5u.com熱心網友回復：

{icons.map(function (Icon) {
    return <SideBarIcon icon={<Icon size="30"/>}/>
})}

組件以大寫字母開頭，只需更改icon為Icon. 請不要忘記為您的映射專案使用 key prop。

https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

uj5u.com熱心網友回復：

通過簡單地放入icon標簽，它認為您正在呈現一個名為 icon 的 HTML 元素，因此它不會呈現映射的專案。如果您將其設定為，它也將不起作用<{icon}/>，因為它會嘗試渲染一個空元素。

幸運的是，有一個簡單的解決方法——只需將 Icon 大寫，React 就會將其呈現為 JSX 組件。

{icons.map(function(Icon) {
    return <SideBarIcon icon={<Icon size="30"/>}/>
})}

uj5u.com熱心網友回復：

const SideBar = () => {
const icons = [<FaFire size="30" />, <FaPoo size="30" />];

return (
    <div className="fixed top-0 left-0 h-screen w-20 m-0 flex flex-col bg-gray-100 text-white shadow-lg">
        {icons.map(function(icon) {
            return <SideBarIcon icon={icon}/>
        })}
    </div>
);

};

uj5u.com熱心網友回復：

由于您使用icon的是小寫字母，因此它不會被識別為jsx組件。要解決此問題，請將其更改為大寫。

轉這個

        {icons.map(function(icon) {
            return <SideBarIcon icon={<icon size="30"/>}/>
        })}

對此

        {icons.map(function(Icon) {
            return <SideBarIcon icon={<Icon size="30"/>}/>
        })}

此外，如果底層組件允許，您可以使用直接呼叫，如下所示：

        return <SideBarIcon icon={icon({size:"30"})/>

請記住，在大多數情況下，這不是您想要的，并且可能會引入難以修復的錯誤。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/455028.html

標籤：javascript css 反应

上一篇：如何從盒子中移除這個黑色陰影？

下一篇：表格忽略樣式顏色