Question

我想在React组件中使用下面的jQuery代码作为网站中横幅的背景。导入css可行，但是导入JS或将其放入render（）{}均无效。该怎么办？

codepen：https://codepen.io/dooblr/pen/BXwWyJ

html：

<div class="sea">
  <div class="bubblesContainer"></div>
</div>

css：

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.sea {
  height: 19000px;
  background-image: linear-gradient(to bottom, #1cb5e0, #000046); 
  min-height: 100%;
  position: relative;
}

.bubbles {
  background: radial-gradient(transparent, #eef2f3);
  box-shadow: 0 0 4px #eef2f3, inset 0 0 8px #eef2f3;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
}

@keyframes bubblingUp {
 100% { transform: translatey(-1000px); }
}

js：

var scrollPosition = 0;

var numberBubbles = 200;
while (numberBubbles > 0){
  $(".bubblesContainer").append('<div class="bubbles"></div>');
numberBubbles--;
}

$( ".bubbles").each(function( index ) {
  var x = (Math.random() * ($('body').width()));
  var y = (Math.random() * ($('body').height()));
  var minSpeed = (Math.random() * 20);
  var speed = (minSpeed + Math.random() * 20 + 's');
  var widthHeight = Math.floor(Math.random() * 40)
  $(this).css({
    'left': x + 'px',
    'top': y + 'px',
    'width': widthHeight +"px",
    'height': widthHeight +"px",
    'animation': 'bubblingUp ' + speed + ' infinite ease-out'
  });
  var delay = Math.floor(Math.random() * 100);
  $(this).hide().delay(delay).fadeIn();
});

Answer 1

为了使其工作，您必须了解React的工作方式。您的此JQuery代码将无效。由于DOM元素在运行时将不会呈现。因此，您必须等待，直到元素都呈现在DOM（您要访问的元素）中。

为此，React提供了生命周期方法。呈现时，React组件将执行以下生命周期方法（按相同顺序）。

Constructor — React组件的构造函数。
ComponentWillMount —通知该组件将被安装在DOM上。
Render-实际上是在DOM上呈现HTML。
ComponentDidMount-通知您HTML已在DOM中呈现。

因此，您可以使用React生命周期挂钩ComponentDidMount来运行jQuery代码。（您可以阅读有关生命周期方法here的更多信息）。

接下来的事情是，由于您是在组件内部编写jQuery代码，因此您需要在组件内部可以访问它— $。为此，您需要像其他任何软件包一样，将jQuery安装为依赖项。

因此，请使用以下命令安装jQuery：

npm install --save jquery;

现在，在您的React组件内部，将其导入：

import $ from "jquery";

然后，在生命周期方法ComponentDidMount中，编写您的jQuery代码。

此外，在组件的render方法中，返回您的HTML：

<div class="sea">
  <div class="bubblesContainer"></div>
</div>

此外，不要忘记添加CSS。我还为您创建了一个CodeSandBox working demo 。一探究竟。这会有所帮助。

将Vanilla / jquery元素添加到React组件

1 个答案: