ReactJS JQueryで使用されるループ/マップの中からrefs/class/idを取得

Question

map関数内の要素のクラスまたはidまたはrefの参照を取得できますか？私はREF =アイテムやjQueryの

でクラス= hakuna-マタタ配列やオブジェクトにアクセスしたい

componentDidMount(){ 
     console.log(ReactDOM.findDOMNode(this.refs.items)); 
} 
render(){ 

    var loop = Object.keys(this.state.posts).map((key) => { 
     var post = this.state.posts[key]; 
     return(
      <div key={key} className="hakuna-matata" ref="items"> 
       ... 
      </div> 
     ) 
    } 

    return {loop} 
} 

誰でも助けることができますか？してください

Answer 1

さて、あなたのloopの内容は配列です。文字列に配列を折り畳んで、HTMLコード全体を取得します。

第2に、問題はHTMLコードでjQueryを使用する場所です。 レンダリングメソッド内にある限り、コードはDOMツリーにありません。だから、jQueryにコードを解析させなければなりません：var myJqueryNode = $(loop.join());。それが原因となるので、あなたは、ループ内refを入れたくないかもしれ$('.hakuna-matata');

Answer 2

：レンダリングはあなたが簡単のようなDOMツリーを照会することができます実行された後にリアクトであなたは、イベントハンドラのいくつかの種類である場合

複製。代わりに、あなたはこれを行うことができます。

handlePost = (e, post) => { 
    //do whatever to post here... 
    //do whatever to e here... 
} 

render(){ 
    const loop = Object.keys(this.state.posts).map((key) => { 
     const post = this.state.posts[key]; 
     return(
      <div key={key} className="hakuna-matata" 
       onClick={(e) => {this.handlePost(e, post}}> 
       ... 
      </div> 
     ); 
    } 
    return {loop} 
} 

ポストをクリックすると、方法handlePostにポストオブジェクトを渡すと、あなたはrefsを使用せずに何でもそれを行うことができます。 eまたはeventを渡して、イベントオブジェクトにアクセスすることもできます。