Javascript 如何使用Next/Head渲染脚本
根据我的理解，我可以使用next/head在React/next JS应用程序的组件中嵌入脚本标记。所以，我就这样做了：Javascript 如何使用Next/Head渲染脚本,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,根据我的理解，我可以使用next/head在React/next JS应用程序的组件中嵌入脚本标记。所以，我就这样做了： import React, { Component } from "react"; ... import Head from "next/head"; export const Lead = props => { return ( ... <Head> <script class="375
import React, { Component } from "react";
...
import Head from "next/head";
export const Lead = props => {
return (
...
<Head>
<script
class="3758abc"
type="text/javascript"
src="https://cdn2.fake.com/Scripts/embed-button.min.js"
data-encoded="1234sdkljfeiASD9A"
></script>
</Head>
...
);
};
import React，{Component}来自“React”；
...
从“下一个/Head”导入Head；
导出const Lead=props=>{
返回(
...
...
);
};
import App, { Container } from "next/app";
import Page from "../components/Page";
import { ApolloProvider } from "react-apollo";
import withData from "../lib/withData";
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
// this exposes the query to the user
pageProps.query = ctx.query;
return { pageProps };
}
render() {
const { Component, apollo, pageProps } = this.props;
return (
// <Container>
<ApolloProvider client={apollo}>
<Page>
<Component {...pageProps} />
</Page>
</ApolloProvider>
// </Container>
);
}
}
export default withData(MyApp);
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static getInitialProps = async ctx => {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
)
};
} finally {
sheet.seal();
}
};
}
import Head from "next/head";
function MyApp({ Component, pageProps }) {
return (
<React.Fragment>
<Head>
<script
id="my-script"
src="https://scriptsource.com/script"
type="text/javascript"
></script>
</Head>
<LayoutComponent {...pageProps}>
<Component {...pageProps} />
</LayoutComponent>
</React.Fragment>
);
}
export default MyApp;
从“下一个/App”导入App，{Container}；
从“./组件/页面”导入页面；
从“react apollo”导入{ApolloProvider}；
从“./lib/withData”导入withData；
类MyApp扩展了应用程序{
静态异步getInitialProps（{Component，ctx}）{
让pageProps={}；
if（Component.getInitialProps）{
pageProps=等待组件.getInitialProps（ctx）；
}
//这将向用户公开查询
pageProps.query=ctx.query；
返回{pageProps}；
}
render（）{
const{Component，apollo，pageProps}=this.props；
返回(
//
//
);
}
}
使用数据导出默认值（MyApp）；
import App, { Container } from "next/app";
import Page from "../components/Page";
import { ApolloProvider } from "react-apollo";
import withData from "../lib/withData";
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
// this exposes the query to the user
pageProps.query = ctx.query;
return { pageProps };
}
render() {
const { Component, apollo, pageProps } = this.props;
return (
// <Container>
<ApolloProvider client={apollo}>
<Page>
<Component {...pageProps} />
</Page>
</ApolloProvider>
// </Container>
);
}
}
export default withData(MyApp);
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static getInitialProps = async ctx => {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
)
};
} finally {
sheet.seal();
}
};
}
import Head from "next/head";
function MyApp({ Component, pageProps }) {
return (
<React.Fragment>
<Head>
<script
id="my-script"
src="https://scriptsource.com/script"
type="text/javascript"
></script>
</Head>
<LayoutComponent {...pageProps}>
<Component {...pageProps} />
</LayoutComponent>
</React.Fragment>
);
}
export default MyApp;
从“下一个/文档”导入文档；
从“样式化组件”导入{ServerStyleSheet}；
导出默认类MyDocument扩展文档{
静态getInitialProps=async ctx=>{
const sheet=new ServerStyleSheet（）；
const originalRenderPage=ctx.renderPage；
试一试{
ctx.renderPage=（）=>
原始渲染图({
enhanceApp:App=>props=>sheet.collectStyles（）
});
const initialProps=wait Document.getInitialProps（ctx）；
返回{
…初始道具，
风格：(
{initialProps.style}
{sheet.getStyleElement（）}
)
};
}最后{
表1.seal（）；
}
};
}
\u document.js<body>
<Main />
<NextScript />
<script
class="3758abc"
type="text/javascript"
src="https://cdn2.fake.com/Scripts/embed-button.min.js"
data-encoded="1234sdkljfeiASD9A"></script>
</body>
我一直在研究一个类似的问题 我尝试了上面的答案，将
next/head\u app.js
import App, { Container } from "next/app";
import Page from "../components/Page";
import { ApolloProvider } from "react-apollo";
import withData from "../lib/withData";
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
// this exposes the query to the user
pageProps.query = ctx.query;
return { pageProps };
}
render() {
const { Component, apollo, pageProps } = this.props;
return (
// <Container>
<ApolloProvider client={apollo}>
<Page>
<Component {...pageProps} />
</Page>
</ApolloProvider>
// </Container>
);
}
}
export default withData(MyApp);
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static getInitialProps = async ctx => {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
)
};
} finally {
sheet.seal();
}
};
}
import Head from "next/head";
function MyApp({ Component, pageProps }) {
return (
<React.Fragment>
<Head>
<script
id="my-script"
src="https://scriptsource.com/script"
type="text/javascript"
></script>
</Head>
<LayoutComponent {...pageProps}>
<Component {...pageProps} />
</LayoutComponent>
</React.Fragment>
);
}
export default MyApp;
从“下一个/Head”导入Head；
函数MyApp（{Component，pageProps}）{
返回(
);
}
导出默认MyApp；
我不知道此解决方案是否会产生任何我不知道的不良影响，但到目前为止，它已解决了我的问题。可能与此有关，有一个PR解决了吗？一周前，它还没有发布，除了金丝雀版本。它不应该添加到
\u应用程序中。那么noscript
就不能正常工作了！