如何在React组件中导入js文件？

Question

$( "#left_arrow" ).click(function() {   
  if ($(".left_block").hasClass("w-0")) {
     $(".left_block" ).removeClass("w-0");        
   }else{
     $(".left_block" ).addClass("w-0");
   }
 });

在custom.js中，使用以下脚本导入时，我具有上述脚本代码功能不起作用。

 import * as script from '../js/custom.js';

在Html页面中，当我加载此文件时，它可以工作，但是在编写react组件时，它不起作用

Answer 1

您不应该将React与jquery混合使用，要实现的目标可以在React中轻松实现

 class App extends React.Component { state = { class: 'w-0' } handleClick=()=> { if(this.state.class === 'w-0') { this.setState({class: ''}) } else{ this.setState({class: 'w-0'}) } } render() { return ( <div> <div id="left_arrow" className="left_arrow" onClick={this.handleClick}><i className="fa fa-chevron-left" />Arrow</div> <div className={"left_block " + this.state.class}>Hello World</div> </div> ) } } ReactDOM.render(<App/>, document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> <div id="app"></div>