iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

關於我快30歲的後端工程師,想轉職成全端工程師,在前端世界中尋求機會的那件事(前端篇)系列 第 8

[Day 8]開賽八天即遭遇難題(前端篇)

挑戰目標: MockNative Camp前端


今天原本是要來refactor和解決hover的問題的,但是在將navtab給component化時遭遇難題,首先將tab的資訊給寫入next.config.js

module.exports = {
    images: {
        domains: ['nativecamp.net']
    },
    serverRuntimeConfig: {
        navTab: [
            { name: "首頁", image: "https://nativecamp.net/user/images/gnavi/ic_home.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_home-h.svg" },
            { name: "指南", image: "https://nativecamp.net/user/images/gnavi/ic_guide.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_guide-h.svg" },
            { name: "學習", image: "https://nativecamp.net/user/images/gnavi/ic_study.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_study-h.svg" },
            { name: "搜尋・預約講師", image: "https://nativecamp.net/user/images/gnavi/ic_search.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_search-h.svg" },
            { name: "其他", image: "https://nativecamp.net/user/images/gnavi/ic_etc.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_etc-h.svg" },
        ]
    }
}

會使用serverRuntimeConfig是看了官方的文件,使用的方式也很簡單

import getConfig from 'next/config'

function Nav() {
const { serverRuntimeConfig } = getConfig();
}

先看一下我們component化的NavTab.js,使用props傳入圖片以及tab名稱

import { useState } from 'react';
import Image from "next/image";

function NavTab({ image, imageHov, name }) {
    const [isHovering, setIsHovered] = useState(false);
    const onMouseEnter = () => setIsHovered(true);
    const onMouseLeave = () => setIsHovered(false);

    return (
        <li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}>
            <div className="space-y-2 w-48 flex justify-center items-center flex-col">
                <div className="relative flex h-[28px] w-[28px]">

                    {isHovering ? (
                        <Image
                            src={imageHov}
                            layout="fill"
                            objectFit="contain"
                        />
                    ) : (
                        <Image
                            src={image}
                            layout="fill"
                            objectFit="contain"
                        />
                    )}
                </div>
                <div className="pb-2" >
                    <span className="text-sm">{name}</span>
                </div>
            </div>
        </li>
    )
}

export default NavTab

然後將Nav.js修改一下,

import getConfig from 'next/config'
import NavTab from './NavTab'

function Nav() {

    const { serverRuntimeConfig } = getConfig();
    return (
        <div className="">
            <ul className="flex flex-row items-center justify-center pt-2 border-b">
                {serverRuntimeConfig.navTab?.map(({ image, imageHov, name }) => (
                    <NavTab key={name} image={image} imageHov={imageHov} name={name} />
                ))}
            </ul>
        </div>
    )
}
export default Nav

然後發現出事啦阿伯!
console顯示錯誤,這錯誤還是第一次遇到,但因為時間不夠,還沒找到解法...現實總是如此出乎意料呢

react-dom.development.js:67 Warning: Did not expect server HTML to contain a <li> in <ul>.

明天看能不能把他解決再往下繼續挑戰


上一篇
[Day 7]想不到有梗的標題LA(前端篇)
下一篇
[Day 9]人不作死就不會死(前端篇)
系列文
關於我快30歲的後端工程師,想轉職成全端工程師,在前端世界中尋求機會的那件事(前端篇)18

尚未有邦友留言

立即登入留言