Question

这适用于常规DOM元素和jQuery元素。我希望将实际元素存储在类中的某些位置。这样做是否有参考共同模式？

另外，我知道一般情况下你不应该在React中使用jQuery，但是我需要jQuery函数来使我的菜单工作并且没有时间用于重构但是它工作正常。

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

class MobileMenu extends React.Component {
  constructor (props) {
    super(props);
    this.clickHandler1 = this.clickHandler1.bind(this);
    this.clickHandler2 = this.clickHandler2.bind(this);
    this.clickHandler3 = this.clickHandler3.bind(this);
  }

  clickHandler1 () {
    this.toggleMenu();
  }

  clickHandler2 () {
    // MenuPage.flip('fave');
    this.toggleMenu();
    this.toggleMarker($A.el('#nav_fave'));
  }

  clickHandler3 () {
    // MenuPage.flip('splash');
    this.toggleMenu();
    this.toggleMarker($A.el('#nav_splash'));
  }

  toggleMarker (current_item) {
    if ((this.previous_item !== undefined) && (this.previous_item !== current_item)) {
        this.previous_item.style.borderBottom = '';
    }
    if (this.previous_item !== current_item) {
        current_item.style.borderBottom = '3px solid #31baed';
    }
    this.previous_item = current_item;
  }

  toggleMenu () {
    if (window.getComputedStyle($A.el('#top_menu_list'), null).display === 'block') {
        $('#icon_bars').toggleClass('active');
        $('#top_menu').slideToggle();
    }
  }
  // ... snip
}

export default MobileMenu

Answer 1

您可以尝试ref pattern 请记住，您使用的反应方式错误，其最佳功能之一是超快速渲染，因为虚拟DOM和Diff算法。 你正在努力!!! ：）

编辑作为评论的后续内容
ref属性允许您向反应组件class添加对象，此对象是对实际DOM元素的引用。
所以基本上你可以用jQuery方法包装它并做你需要的任何事情说到这一点，我真的反对这个建议！一个例子：

＆＃13;

class App extends React.Component {
constructor(props){
  super(props);
  
  this.changeColor = this.changeColor.bind(this);
}

  changeColor(e){
    $(this.myelement).addClass('highlight');
  }
  render() {
    return (
      <div>
        <h3>Do not use jQuery with React!</h3>
        <div ref={(el) => {this.myelement = el}} onClick={this.changeColor}>
        Click me!
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

.highlight {
  border: 2px solid #eee;
  background: #333;
  color: #ccc;
  width: 100px;
  height: 50px;
  text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

＆＃13;

编辑＃2
您现在正在询问如何修改元素（例如，在示例中添加css类）那么这完全是一个不同的问题，我确信在SO上有几个很好的答案，但无论如何我会给你一个小例子。
我使用的代码与上面的示例相同，但现在我没有使用jQuery进行此操作。
至于css和一般的样式反应，我敦促你阅读我在这里解释的不同方法（css modules，styled components等。）。 /> 请记住，这是一个非常小而简单的例子，我使用了很多模式中的一个来应对这一挑战。

＆＃13;

const MyComponent = ({highlight, onClick}) => {
  const cssClassName = highlight && 'highlight'; // this will be undefined or 'highlight'
  return(
    <div className={cssClassName} onClick={onClick} >Click me for a COMPONENT example!</div>
  );
}

class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      isDivClicked: false,
      isComponentClicked: false
    }
    this.changeDiv = this.changeDiv.bind(this);
    this.changeComponent = this.changeComponent.bind(this);
  }

  changeDiv(e){
    this.setState({isDivClicked: true});
  }
  
  changeComponent(e){
    this.setState({isComponentClicked: true});
  }
  
  render() {
    const {isDivClicked, isComponentClicked} = this.state;
    return (
      <div>
        <h3>Do not use jQuery with React!</h3>
        <div onClick={this.changeDiv} className={isDivClicked && 'highlight'}>
          Click me for a simple DIV example!
        </div>
        <hr/>
        <MyComponent onClick={this.changeComponent} highlight={isComponentClicked}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

.highlight {
  display:inline-block;
  border: 2px solid #eee;
  background: #333;
  color: #ccc;
  width: auto;
  height: 50px;
  text-align:center;
}

＆＃13;

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

＆＃13;

Answer 2

为什么不使用基本对象数组并按ID推送它们？

我创建了一个简单的演示。也许有更优雅的方式来做反应，但使用jquery作为助手这很容易。

https://jsfiddle.net/cfnb4fkw/

var domCache = new Array();

function cacheDomObj(domObj){
     domCache[$(domObj).attr('id')] = domObj;
}

function getDomObj(id){
    return domCache[id];
}

function demo(){
    cacheDomObj($("#domElement1"));
    alert("Element cached" + domCache.length);
    $("#domElement1").remove();
    alert("Removed element");
    var retreivedElement = getDomObj('domElement1');
    $("#container").append(retreivedElement);
}

demo();

如果你想让cacheDomObj更加冗长，你可以将它集成到你的班级并加快一点......

function cacheDomObj(id,obj){
      domCach[id] = obj;
}

- 存储我在React中使用的DOM元素，所以我不继续拉它们？

2 个答案: