[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>.

明天看能不能把他解决再往下继续挑战