我试图导入功能，因为我想点击<il> servies</il>并滚动到主页中的服务部分
我只是想点击这是在导航栏页面和服务部分是在主页上滚动李。这两个页面是不同的，为什么我的模块不工作的NEXT.JS
代码镜像navbar code imageserviecs page code image
**面对错误 *
Import trace for requested module:
./components/Navbar.js
wait - compiling...
error - ./components/Navbar.js
Error:
x Expected ',', got ':'
,-[D:\Next.js projects\help-desk\components\Navbar.js:8:1]
8 | const ref = useRef();
9 | const scrollToSection = (elementRef) =>{
10 | window.scrollTo(
11 | top:elementRef.current.offsetTop,
: ^
12 | behavior: 'smooth'
13 | )
13 | }
`----
Caused by:
Syntax Error
Import trace for requested module:
./components/Navbar.jsnavbar.js Code：
import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { useRef } from 'react'
import { AiOutlineSearch } from 'react-icons/ai';
AiOutlineSearch
const Navbar = () => {
const ref = useRef();
const scrollToSection = (elementRef) =>{
window.scrollTo(
top:elementRef.current.offsetTop,
behavior: 'smooth'
)
}
return (
<>
<div className='flex flex-col md:flex-row md:justify-start justify-center items-center py-1 drop-shadow-xl bg-slate-100'>
<div className='logo mx-9 cursor-pointer'>
<Image width={70} height={70} src="/navhome.png" alt=" " />
</div>
<div className="nav">
<ul className='flex items-center space-x-6 font-bold md:text-md'>
<Link legacyBehavior href={"/"}><a><li>Home</li></a></Link>
<Link legacyBehavior href={"/about"}><a><li>About</li></a></Link>
{/* <Link legacyBehavior href={"/servies"}><a><li>Services</li></a></Link> */}
<li onClick={()=> scrollToSection(ref) href="#section"}>Services</li>
<Link legacyBehavior href={"/contact"}><a><li>Contact</li></a></Link>
</ul>
</div>
<div className="search absolute right-0 top-6 mx-5">
<AiOutlineSearch className='text-xl md:text-3xl'/>
</div>
</div>
</>
)
}
export default Navbar;
export { scrollToSection };index.js文件：
import Image from 'next/image'
import Head from 'next/head'
import Link from 'next/link'
import {scrollToSection} from '../components/Navbar.js'
import Servies from '../pages/servies'
export default function Home() {
return (
<div>
<Head>
<title>HelpDesk.com - we're here to serve you </title>
<meta name="description" content="HelpDesk.com - we're here to serve you" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<img src="/home.jpg" alt="" />
</div>
<section ref={ref} className='scrollService' id='sectionid' >
<Servies />
</section>
<br />
</div>
)
}
1条答案
按热度按时间jdzmm42g1#
如果使用节的id属性作为链接的目标，则可以获得所需的结果。
Next.js
React
HTML