Question

将这个简单的轮播集成到我的React组件中时遇到问题：

就是说，我不明白如何将代码的JS部分集成到我的React中。

我已经阅读了一些主题，并且已经将jQuery的一些代码包含在组件的DidComponentMount元素中，但是如何将这部分代码“定位”到轮播呢？

看着这段代码，我认为：

func main() {
    log.Printf("testing regexA")
    applyRegex(regexA)
    log.Printf("testing regexB")
    applyRegex(regexB)
}

func applyRegex(r *regexp.Regexp) {

    matches := r.FindAllSubmatch(data, -1)
    groups := r.SubexpNames()

    for mIdx, match := range matches {
        findings := smap{}
        for idx, submatch := range match {
            findings[groups[idx]] = fmt.Sprintf("% x", submatch)
        }
        log.Printf("match #%d: %+v", mIdx, findings)
    }
}

我们获取.flexslider类的每个实例，然后为其添加一个自定义事件，该事件添加了“动画：幻灯片”和“ controlNav：false”。

我说对了吗？有趣的是，相邻的CSS既没有“ slide”也没有controlNav定义，那么此函数从何处获取可执行代码？

2009/11/10 23:00:00 testing regexA
2009/11/10 23:00:00 match #0: map[:72 03 00 79 20 TLen:00 79 Payload:20]
2009/11/10 23:00:00 testing regexB
2009/11/10 23:00:00 match #0: map[:72 03 00 79 20 dd 39 22 4d cf 6d 17 29 02 ee e3 7f 5e ca 17 62 c8 56 24 01 1e 9f a0 96 c6 4f bb a2 51 7b bf 33 31 00 00 05 4c 00 00 1a 6a 00 00 03 8d 34 00 00 00 00 04 14 81 e7 86 a7 76 51 02 9d 18 09 ff de de 05 51 02 9d 18 TLen:00 79 Payload:20 dd 39 22 4d cf 6d 17 29 02 ee e3 7f 5e ca 17 62 c8 56 24 01 1e 9f a0 96 c6 4f bb a2 51 7b bf 33 31 00 00 05 4c 00 00 1a 6a 00 00 03 8d 34 00 00 00 00 04 14 81 e7 86 a7 76 51 02 9d 18 09 ff de de 05 51 02 9d 18]

Answer 1

如果您使用jQuery或其他第三方库（谷歌地图）在react组件内操作DOM或DOM的一部分，请将shouldComponentUpdate生命周期方法设置为false，以防止对React重新呈现操纵DOM。您也可以使用ref选择目标div。

import React from 'react';
import $ from 'jquery';


class AppWithJQuery extends React.Component {

  divRef;

  componentDidMount(){
    $(this.divRef).flexslider({...
  }

  shouldComponentUpdate(){
    return false;
  }

  setRef = ref => { this.divRef = ref };

  render(){
    return (
      <div className="flexslider" ref={this.setRef}>
        <ul className="slides">
           ...
        </ul>      
       </div>
    )
  }
}

如何将jQuery JS轮播代码包含到React组件中

1 个答案: