javascript - 如何在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

你不应该将 jquery 与 React 混合在一起，你想要实现的东西可以很容易地在 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>