i want to run js file External JavaScript(JS,Jquery)Not working in ReactJS

vxqlmq5t  于 10个月前  发布在  jQuery
关注(0)|答案(1)|浏览(160)

我正在使用ReactJS创建一个Web应用程序前端。
我已经下载了一个模板,其中使用HTML5 CSS自定义JS文件设计,还包括一些第三方/供应商JS/jQuery carouFredSel等
我在react.js上有问题,当我打开页面错误给予我在控制台像

carouFredSel: No element found for "#mission .carousel.main ul".

字符串
当正常的html和添加我的文件java脚本和其他文件它工作正常.
我认为从React渲染它渲染后的家庭脚本做?任何帮助对这个问题!

ccgok5k5

ccgok5k51#

下面是一个混合jQuery和React的例子。
这里的主要内容是创建一个DIV,然后使用React.useRef,将其分配给DIV,然后在useEffect中可以直接访问DIV,然后可以设置其innerHTML并对其应用任何jQuery方法。
下面是jQuery carousel的示例,在顶部,标准React在底部。
注意事项:当然你也可以扩展它来传递props,这样innerHTML就可以把图片的url作为数组来传递了,但是它会保持原样,这样其他人就可以很容易地理解了。

const domNode = document.getElementById('mount');
const root = ReactDOM.createRoot(domNode);

function Carousel() {
  const ref = React.useRef();
  React.useEffect(() => {
    const pl = 'https://albert-cyberhulk.github.io/jQuery-Carousel/example/bower_components/jquery-cccarousel/src/img/placeholder.png';
    ref.current.innerHTML = `
<div class="dynamic">
  <div class="leftDirection"></div>
  <div class="rightDirection"></div>
  <div class="slider">
      ${new Array(14).fill(
      `<div class="image"><img src="${pl}"/></div>`)}
  </div>
</div>`
    $(ref.current).ccCarousel({});
  },[]);
  return <div 
  className="galleryWrapper"
  ref={ref}></div>;
}

function App() {
  return <React.Fragment>
     <Carousel/>
     <div style={{color: 'white'}}>Above is a jQuery Carousel.</div>
     <div style={{color: 'yellow'}}>Mixed with React</div>
  </React.Fragment>
}

root.render(<App/>);

个字符

相关问题