如何在反应中添加JS答案

【问题标题】：How to add JS in react如何在反应中添加JS
【发布时间】：2022-11-02 09:34:44
【问题描述】：

我需要在 react 中添加 JavaScript 代码，谁能帮我解决这个问题，我是编码新手，所以请指导我如何在这个 react 中添加 JS，我在这里附上代码，请告诉我如何以及在哪里添加 JavaScript代码在这里

滑块.js

<div className="slide-container">
      <div className="wrapper">
        <div className="clash-card barbarian">
          <div className="clash-card__image clash-card__image--barbarian">
            <img
              src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/barbarian.png"
              alt="barbarian"
            />
          </div>
          <div className="clash-card__level clash-card__level--barbarian">
            Level 4
          </div>
          <div className="clash-card__unit-name">The Barbarian</div>
          <div className="clash-card__unit-description">
            The Barbarian is a kilt-clad Scottish warrior with an angry,
            battle-ready expression, hungry for destruction. He has Killer
            yellow horseshoe mustache.
          </div>

          <div className="clash-card__unit-stats clash-card__unit-stats--barbarian clearfix">
            <div className="one-third">
              <div className="stat">
                20<sup>S</sup>
              </div>
              <div className="stat-value">Training</div>
            </div>

            <div className="one-third">
              <div className="stat">16</div>
              <div className="stat-value">Speed</div>
            </div>

            <div className="one-third no-border">
              <div className="stat">150</div>
              <div className="stat-value">Cost</div>
            </div>
          </div>
        </div>
      </div>
</div>

这是我必须在这个反应应用程序中添加的 JavaScript 代码，用于移动幻灯片的轮播

(function() {
  
    var slideContainer = $('.slide-container');
    
    slideContainer.slick();
    
    $('.clash-card__image img').hide();
    $('.slick-active').find('.clash-card img').fadeIn(200);
    
    // On before slide change
    slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
      $('.slick-active').find('.clash-card img').fadeOut(1000);
    });
    
    // On after slide change
    slideContainer.on('afterChange', function(event, slick, currentSlide) {
      $('.slick-active').find('.clash-card img').fadeIn(200);
    });
    
})();

我已经尝试过，但我无法运行代码，所以请指导我在 react (Slider.js) 文件中添加此 JavaScript 代码的位置以移动轮播。

【问题讨论】：

jQuery 和 React 不能很好地混合，我强烈建议不要将它们结合起来。
你不应该像在 React 应用程序中那样操作 DOM。
你见过react-slick.neostack.com吗？

标签： javascript html jquery css reactjs

【解决方案1】：

我建议您阅读和学习React documentation website，以获得最佳效果。

但是，是的，有时我们可以采取其他方式。比如 Udemy 等等。

根据文档，React 只是 javascript。但我们仍然可以在其上使用 HTML，在 return 区域。

样本：

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Taylor" />);

希望对您有所帮助。

谢谢

【讨论】：