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页面中，当我加载此文件时，它正在工作，但在反应组件中写入时它不起作用

Answer 1

你不应该将jquery与React混合使用，你想要实现的目标很容易在React中实现，如

＆＃13;

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'))

＆＃13;

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

＆＃13;

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

1 个答案: