如何在Next.js中传递自定义html属性？

ejk8hzay 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(164)

当我传递以下属性时，Next.js会引发警告。这是一种避免的方法吗？

<div
    className="col-lg-6"
    data-anima="fade-bottom"
    data-time={1000}
></div>

以及警告消息：

next-dev.js?3515:24 Warning: Extra attributes from the server: style
    at div
    at div
    at div
    at section
    at main
    at Home
    at Layout (webpack-internal:///./components/Layout.tsx:11:26)
    at AppProvider (webpack-internal:///./tikexModule/AppContext.tsx:24:26)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
    at MyApp (webpack-internal:///./pages/_app.tsx:68:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20740)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23199)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:675:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:797:27)

next.js

来源：https://stackoverflow.com/questions/72933276/how-to-pass-custom-html-attributes-in-next-js

1条答案

按热度按时间

wr98u20j1#

这应该在同一页面上工作，如果在另一个页面上使用e.g. slug，那么不幸的是，它将在页面刷新时消失。
例如：
HTML元素代码：

<div
    id="myId"
    className="col-lg-6"
    data-anima="fade-bottom"
    data-time={1000}
></div>

您的组件代码：

const querySelector = document?.querySelector("div[id='myId']");
const time = querySelector?.getAttribute("data-time");

console.log("%c time:", "font-size:24px;background-color:yellow;color:red;", time);

赞(0）回复(0）举报 2022-11-05

我来回答

如何在Next.js中传递自定义html属性？

1条答案

相关问题

热门标签

最新问答