英文:
Problems using Default navbar components from flowbite-react
问题
我已经安装了这里指示的要求。
然后将整个默认导航栏代码复制到App.jsx文件中，问题出现了
`Uncaught ReferenceError: React is not defined`。
`$$typeof: Symbol(react.forward_ref)`
react.forward_ref是什么？互联网上只显示类似于React.forwardRef.的东西。- 如何解决这个问题？
默认导航栏代码
<Navbar
fluid={true}
rounded={true}
>
<Navbar.Brand
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
<img
src="https://flowbite.com/docs/images/logo.svg"
className="mr-3 h-6 sm:h-9"
alt="Flowbite Logo"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Navbar.Link
href="/navbars"
active={true}
>
Home
</Navbar.Link>
<Navbar.Link
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
About
</Navbar.Link>
<Navbar.Link href="/navbars">
Services
</Navbar.Link>
<Navbar.Link href="/navbars">
Pricing
</Navbar.Link>
<Navbar.Link href="/navbars">
Contact
</Navbar.Link>
</Navbar.Collapse>
</Navbar>
英文:
I have installed the requirements indecated here.
After that copied the entired Default navbar code in App.jsx file, the problem raised is
`Uncaught ReferenceError: React is not defined`.
`$$typeof: Symbol(react.forward_ref)`
- what is
react.forward_ref?. Internet only shows something likeReact.forwardRef. - How can resolve the problem?
Default navbar code
<Navbar
fluid={true}
rounded={true}
>
<Navbar.Brand
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
<img
src="https://flowbite.com/docs/images/logo.svg"
className="mr-3 h-6 sm:h-9"
alt="Flowbite Logo"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Navbar.Link
href="/navbars"
active={true}
>
Home
</Navbar.Link>
<Navbar.Link
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
About
</Navbar.Link>
<Navbar.Link href="/navbars">
Services
</Navbar.Link>
<Navbar.Link href="/navbars">
Pricing
</Navbar.Link>
<Navbar.Link href="/navbars">
Contact
</Navbar.Link>
</Navbar.Collapse>
</Navbar>
答案1
得分: 1
我遇到了同样的问题，我通过移除问题的源或注释掉它来解决了它！
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
英文:
i had the same problem, i solve it by removing the source of the problem or comment it!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
<!-- end snippet -->
答案2
得分: 1
The "as" property should indicate which class you want to use, example:
<Navbar.Brand as={Link} href="/" >
where link comes from
import Link from "next/link";
It seems to be an issue on the translation or creation of the docs, so you should replace:
<Navbar.Brand
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
for
<Navbar.Brand as={Link} href="/" >
英文:
The "as" property should indicate which class you want to use, example:
<Navbar.Brand as={Link} href="/">
where link comes from
import Link from "next/link";
It seems to be an isue on the translation or creation of the docs, so you should replace:
<Navbar.Brand
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
for
<Navbar.Brand as={Link} href="/">
答案3
得分: 0
尝试取消注释React导入语句。例如：import React from 'react'
英文:
Try to uncomment the React import statement. For example: import React from 'react'
答案4
得分: 0
I have the same problem.My flowbite-react navbar does not seem to work
import React from 'react'
import { Navbar } from 'flowbite-react'
function Header() {
return (
<Navbar
fluid={true}
rounded={true}
>
<Navbar.Brand
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
<img
src="https://flowbite.com/docs/images/logo.svg"
className="mr-3 h-6 sm:h-9"
alt="Flowbite Logo"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Navbar.Link
href="/navbars"
active={true}
>
Home
</Navbar.Link>
<Navbar.Link
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
About
</Navbar.Link>
<Navbar.Link href="/navbars">
Services
</Navbar.Link>
<Navbar.Link href="/navbars">
Pricing
</Navbar.Link>
<Navbar.Link href="/navbars">
Contact
</Navbar.Link>
</Navbar.Collapse>
</Navbar>
)
}
export default Header
英文:
i have the same problem.My flowbite-react navbar does not seem to work
import React from 'react'
import { Navbar } from 'flowbite-react'
function Header() {
return (
<Navbar
fluid={true}
rounded={true}
>
<Navbar.Brand
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
<img
src="https://flowbite.com/docs/images/logo.svg"
className="mr-3 h-6 sm:h-9"
alt="Flowbite Logo"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Navbar.Link
href="/navbars"
active={true}
>
Home
</Navbar.Link>
<Navbar.Link
as={{
$$typeof: Symbol(react.forward_ref),
render: LinkWithRef
}}
to="/navbars"
>
About
</Navbar.Link>
<Navbar.Link href="/navbars">
Services
</Navbar.Link>
<Navbar.Link href="/navbars">
Pricing
</Navbar.Link>
<Navbar.Link href="/navbars">
Contact
</Navbar.Link>
</Navbar.Collapse>
</Navbar>
)
}
export default Header
答案5
得分: -1
已修复，请再次查看网站文档：
https://www.flowbite-react.com/docs/components/navbar
英文:
It is now fixed, check the website docs again:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论