如何在react/Gatsby上使用自定义Js模板文件?

Question

这是我第一次来这里。我已经花了两天的时间来解决这个问题。

我是react/gatsby development的新手，我购买了一个带有CSS/js文件的html模板，我找到了在gatsby-ssr.js上导入CSS文件和实际js文件的方法，当我运行gatsby develop命令时，该站点在控制台上给我下一个错误，停止模板js文件工作:

react-dom.development.js:67警告:期望服务器端HTML在<div>中包含匹配的<p>
at p
atdiv
atdiv
atdiv
atdiv
atdiv
atdiv
atdiv
atdiv
at section
atdiv
at StaticQueryDataRenderer

但是当我运行gatsby serve时，就像在生产中一样，错误消失了，js文件工作得完美无缺。已尝试使用"useeffect";来控制DOM对象，但是模板中的自定义js文件使用jQuery来使用由一个js文件加载到gatsby-ssr.js文件中的另一个库。还尝试修改默认的html.js，但没有解决方案。

我认为这是执行时间，这些js模板文件需要加载在html页面渲染结束，这是因为在html模板工作良好，但没有在react组件导入自定义js模板文件。

所有我想要的是摆脱红色警告控制台标志，让自定义js模板文件工作良好，而我在盖茨比的开发模式。我要疯了，哈哈。

编辑

我会尽力解释我在做什么以及它应该如何工作。

1:模板有一个名为main.js的文件，其中包含以下代码。

if ($('#breaking_slider').length > 0) {
$('#breaking_slider').owlCarousel({
items: 1,
loop: true,
dots: false,
nav: true,
animateOut: 'slideOutDown',
animateIn: 'flipInX',
autoplayTimeout: 5000,
autoplay: true,
})
}

2:我使用gatsby-ssr.js像这样导入main.js文件。

import React from 'react'
import { withPrefix, Link } from "gatsby"
export const replaceRenderer = ({ setPostBodyComponents }) => {
setPostBodyComponents([
// .... more template scripts
<script
key={withPrefix('main.js')}
src={withPrefix('main.js')}
crossOrigin="anonymous"
defer
/>,
])
}

3:用下面的代码创建了一个名为nav的组件，我将其用于layout.js和index.js页面

<section className="top-bar transparent">
<div className="container">
<div className="row">
<div className="col-md-12 align-self-center">
<div className="ts-breaking-news clearfix">
<h2 className="breaking-title float-left">
<i className="fa fa-bolt"></i> Breaking News :</h2>
<div className="breaking-news-content owl-carousel float-left" id="breaking_slider">
<div className="breaking-post-content">
<p>
<a href="./">Netcix cuts out the chill with an integrated personal trainer on running.</a>
</p>
</div>
<div className="breaking-post-content">
<p>
<a href="./">Parquet Courts on Resisting Nihilism & Why Tourism in Dubai is booming the world.</a>
</p>
</div>
<div className="breaking-post-content">
<p>
<a href="/">Parquet Courts on Resisting Nihilism & Why Tourism in Dubai is booming the world.</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

4:当我使用命令gatsby开发一秒钟index.js工作得很好，使用main.js和修改DOM对象，但之后在控制台抛出下一个错误，并在第一秒停止执行main.js和修改的视觉效果。

react-dom.development.js:67 Warning: Expected server HTML to contain a matching <p> in <div>.
at p
at div
at div
at div
at div
at div
at div
at section
at div
at StaticQueryDataRenderer

5:如果我实际使用gatsby serve命令而不是gatsby develop像在生产中一样，错误消失了，但最奇怪的是main.js执行从未停止，所以组件工作良好，实际上使用的模板js文件在gatsby-ssr.js工作像假设。

结论:我认为是执行流程,体验语言,像PHP模板的顺序可以做像这样的问题,但从未使用js等深度的语言反应,我知道这是不同的编译js文件,但我试图加载这个js模板文件,我试图将main.js替换为实际useEffect内部组件,但main.js是jQuery和使用其他库加载以同样的方式,这并不能解决问题。

谢谢大家阅读这篇文章，它很长，但必须描述发生了什么，以更好的方式表达我的问题。

Answer 1

有很多值得评论的地方，但我建议你在你的模板中摆脱jQuery和像这样的导入:

if ($('#breaking_slider').length > 0) {
$('#breaking_slider').owlCarousel({
items: 1,
loop: true,
dots: false,
nav: true,
animateOut: 'slideOutDown',
animateIn: 'flipInX',
autoplayTimeout: 5000,
autoplay: true,
})
}

这个文件，直接指向DOM而不是指向React生成的虚拟DOM (vDOM)，永远不会被卸载。这意味着，因为它在React的作用域之外(React不知道真正DOM中的变化)，页面导航将永远不会停止该文件的执行，这意味着性能的巨大下降(这个函数可能看起来毫无意义，但资源正在积累)。

你可以很容易地在一个基于react的环境中重构一个函数，使用owl-carousel基于react的库:

<OwlCarousel className='owl-theme' loop margin={10} nav>
<div class='item'>
<h4>1</h4>
</div>
<div class='item'>
<h4>2</h4>
</div>
<div class='item'>
<h4>3</h4>
</div>
</OwlCarousel>

这就是为什么有特定的基于react的依赖。

上面的代码片段可以是一个独立的组件。

如果你仍然想集成jQuery和React，我将在答案的最后添加一个来自React文档的集成示例，但请记住，你需要处理这种安装/卸载的副作用。

关于警告:检查组件的结构。它应该是这样的:

export default function NavBar(props){
return    <section className="top-bar transparent">
<div className="container">
<div className="row">
<div className="col-md-12 align-self-center">
<div className="ts-breaking-news clearfix">
<h2 className="breaking-title float-left">
<i className="fa fa-bolt"></i> Breaking News :</h2>
<div className="breaking-news-content owl-carousel float-left" id="breaking_slider">
<div className="breaking-post-content">
<p>
<a href="./">Netcix cuts out the chill with an integrated personal trainer on running.</a>
</p>
</div>
<div className="breaking-post-content">
<p>
<a href="./">Parquet Courts on Resisting Nihilism & Why Tourism in Dubai is booming the world.</a>
</p>
</div>
<div className="breaking-post-content">
<p>
<a href="/">Parquet Courts on Resisting Nihilism & Why Tourism in Dubai is booming the world.</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}

用下面的代码创建了一个名为nav的组件，我将其用于layout.js和index.js页

理想情况下，你的index.js应该从你的Layout扩展，所以你不需要导入导航条两次，因为一旦你在布局中导入它，它将在index.js中可用。

const Layout = ({children})=>{
return <main>
<NavBar />
{children}
</main>
}

资源:

• https://reactjs.org/docs/integrating-with-other-libraries.html