- 私はReactで使用するDOM要素を保存しないので保存しますか？

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

あなたはrefpatternを試すことができます。
間違った方法で反応していることに注意してください。最高の機能の1つは、仮想DOMとDiffアルゴリズムによる超高速レンダリングです。
どちらがあなたを傷つけているのですか？ ref属性はあなたがコンポーネントclassを反応させるために、あなたがオブジェクトを追加することができますあなたのコメント
へのフォローとして :)

EDITは、このオブジェクトは、実際のDOM要素への参照です。
基本的にはjQueryメソッドでラップして必要な処理を実行できます。
これは、私は本当にそれに対してアドバイスを言っている！
例：あなたは今、反応に（例えばcssクラスを追加）の要素を変更する方法を求めている

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"));

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

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

EDIT＃2
。
これはまったく別の質問ですが、私はそこにいくつかの良い答えがあると確信していますが、とにかく小さな例をお伝えします。
私は上記の例と同じコードを使用していますが、今はjQueryなしでそれをやっています。
cssについては、私はここで説明しないさまざまなアプローチについて読むことを強くお勧めします（css modules、styled componentsなど）。
これは実際に小さくて簡単な例であり、私はこの挑戦に取り組むために多くのパターンを1つ使用しました。基本的なオブジェクトの配列を使用し、IDによってそれらをプッシュしないのはなぜ

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"));

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

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

Answer 2

？

シンプルなデモを作成しました。たぶん反応を使ってこれを行うよりエレガントな方法がありますが、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; 
}