Question

所以我目前正在将React与NextJS一起使用。我的公司在与我的项目不同的Jenkins工作区中具有导航html，我需要使用它。我已经能够使用工作空间的相对路径来实现这一点：

import React from 'react'

import Header from '../../../workspace/html/global/nav/header.html'
import Nav from '../../../workspace/html/global/nav/nav.html'
import Footer from '../../../workspace/html/global/nav/footer.html'

const Layout = ({ children }) => {
    const navigation = Header + Nav;
    return(
        <div id="container">
            <div id="header" dangerouslySetInnerHTML={{ __html: navigation }} />
            <main>
                <div className="container">
                    { children }
                </div>
            </main>
            <div className="footer" dangerouslySetInnerHTML={{ __html: Footer }} />
        </div>
    )
}

export default Layout;

但是，根据环境的不同，工作空间名称将有所不同。例如，类似：

开发： import Header from '../../../workspace_dev/html/global/nav/header.html'

产品： import Header from '../../../workspace_prod/html/global/nav/header.html'

我知道您不能在导入中使用模板文字，但是是否有替代方法可以基于我的env var动态更改此工作空间路径？也许在NextJS配置或Webpack配置中的某个地方？

还是有更好的整体方法来实现使用动态路径导入html并将其注入组件中？

从相对的工作区导入HTML标记（React＆NextJS）

0 个答案: