2

我需要在第三方 html 标记中构建我的 Next.js 应用程序。

标记如下：

头文件.txt

<html>
  <head>
    <title>Some title</title>
  </head>
  <body>
    <header>Some header</header>
    <div>

页脚.txt

    </div>
    <footer>Some footer</footer>
  </body>
</html>

这些文件动态生成到一个文件夹中。当我渲染我的 next.js 应用程序时，我需要将它们包装在我的应用程序周围。

我使用名为的包创建了一个工作示例：html-react-parser

我从 _document.js 中的文件中解析标记，我正在寻找一个自定义元素 id，我将用下一个 js 应用程序替换它，如下所示：

const header = fs.readFileSync(path.resolve(ROOT + '/resources', 'header.txt'), 'utf8');
const footer = fs.readFileSync(path.resolve(ROOT + '/resources', 'footer.txt'), 'utf8');
const shell = `
    ${header}
    <main id="react-app"></main>
    ${footer}
`;


// later in the render method od _document.js:

render() {
        return (
            <React.Fragment>
                {parse(shell, {
                    replace: domNode => {
                        if (domNode.attribs && domNode.attribs.id === 'react-app') {
                            return (
                                <React.Fragment>
                                    <Main/>
                                    <NextScript/>
                                </React.Fragment>
                            )
                        }
                    }
                })}
            </React.Fragment>
        )
    }

虽然这可行，但我的问题是，这不是 html-react-parser 的目的，因为它将文件的标记转换为反应组件，并在转换过程中抛出许多关于反应不能使用的错误使用的 html 道具的警告.

也许解决方案是使用 dangerouslySetInnerHTML，但在这种情况下我不能注入和 .

// it fails because it wont treat the components as normal html
// <Main/><NextScript/> are not evaluated
      

const header = fs.readFileSync(path.resolve(ROOT + '/resources', 'header.txt'), 'utf8');
const footer = fs.readFileSync(path.resolve(ROOT + '/resources', 'footer.txt'), 'utf8');
const shell = `
    ${header}
      <React.Fragment>
        <Main/>
        <NextScript/>
      </React.Fragment>
    ${footer}
`;

// later in the render method od _document.js:

render(<html dangerouslySetInnerHTML={{__html: shell}}/>)

如果有人有一个想法，我怎么能设法将我的下一个应用程序包装在来自文件的标记周围，请给我一些建议。

4

2 回答 2

2

You can achieve that with custom server,

const express = require('express')
const next = require('next')

const header = fs.readFileSync(path.resolve(ROOT + '/resources', 'header.txt'), 'utf8');
const footer = fs.readFileSync(path.resolve(ROOT + '/resources', 'footer.txt'), 'utf8');

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.all('*', async (req, res) => {
    const nextResponse = await handle(req, res);
    return mergeHTML(header, footer, nextResponse); // You will need to "merge" cause nextResponse has `head` & `body` as well.
  })

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

mergeHTML should merge head from your header & next's head & the body. You can use cheerio to help you with that.

于 2020-02-23T08:10:03.910 回答
0

我使用危险的SetInnerHTML 解决了这个问题。基本上它不关心你传递给它的字符串语法，所以我在 _document.js 中提出了以下解决方案：

<Html>
  <html dangerouslySetInnerHTML={{__html: header}}/>
  <Head />
  <body>
      <Main />
      <NextScript />
  </body>
  <html dangerouslySetInnerHTML={{__html: footer}}/>
</Html>

dangerouslySetInnerHTML 的两个调用都采用奇数个元素并包裹 next.js 组件。

如果有人有另一个解决方案，可能没有危险的SetInnerHTML，请评论它。

于 2020-02-23T12:39:40.273 回答