如何在react中添加JS

Question

我需要在react中添加JavaScript代码，有人能帮我吗

Slider.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>

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

(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代码以移动caroonal。

Answer 1

我建议您在React文档网站上阅读和学习，以获得最佳效果。

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

根据Docs的说法，React只是一个javascript。但我们仍然可以在return区域使用HTML。

样品：

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

希望对你有所帮助。

谢谢