elemがマップ内にあるとき、Reactjsはgetelementbyidできません。

Question

reactjsに問題があります。

divの最大幅を設定するには、画面の高さとdivを比較する必要があります。

画面サイズに問題はありませんが、確認したいdivが地図の内側にあるという問題があります。したがって、この行は常にnullを返します。

を指し

componentDidMount() { 
    test2 = document.getElementById("coucou"); 
    console.log(test2); 
} 

：だから

render() { 
    return (
    <div> 
     {this.props.data.map((value, i) => { 
     return (
      <div key={i}> 
      { 
       this.state.activeIndex === 0 ? 
        <div id="coucou" style={{width: '75%', margin: '0 auto'}}> 
         <img 
          className={"image-detail"} 
          style={{maxWidth: '80%', borderRadius: '12px'}} 
          src={imgBaseUrl + value['mainImage']} 
         /> 
        </div> 
      } 
      </div> 
     ); 
     } 
    </div> 
); 
} 

、私はIDものdivのクラスにアクセスすることはできません。

理由は何ですか？どうすればこれらの要素にアクセスできますか？

Ps：表示されるコードは全体の一部であり、マップは他の条件を扱います。それにもかかわらず、私はそれをチェックしました、idはこのdiv/imageにユニークです。 しかし、問題はgetElementsByClass => null

Answer 1

はテスト文がReactDOM.renderに後にコールをを実行しない限り、実際のDOMにレンダリングする前に、「仮想」DOMに取り組んで作品を反応させるのと同じで、結果がにありますその要素はReactの仮想DOMにまだ残っています。

例えば、.componentDidMountという正しい場所にテストコードを置いたとすると、this.props.dataを直接記録しようとしましたか？あなたの場合は単に空であるかもしれません。 Array#mapは、値の配列を生成するので

はまた、あなたのコードに少し問題がある、id「COUCOU」、およびisn't valid HTMLものとdiv Sが複数存在することができます。

Answer 2

ベストプラクティスに従わず、refを使用する理由がある場合は、

return (
    <div> 
    {this.props.data.map((value, i) => { 
     return (
     <div key={i}> 
      { 
      this.state.activeIndex === 0 ? 
       <div ref={n => (this.coucouRef = n)} style={{width: '75%', margin: '0 auto'}}> 
        <img 
         className="image-detail" 
         style={{maxWidth: '80%', borderRadius: '12px'}} 
         src={imgBaseUrl + value['mainImage']} 
        /> 
       </div> 
      } 
     </div> 
    ); 
    } 
    </div> 
); 

this.coucouRefでアクセスします。

また、静的文字列を中括弧で囲む必要はありません（className="image-detail"）。

また、配列のインデックスをループのキーとして割り当てることはお勧めできません - 配列の順序に従って変更されないIDなど、そのアイテムに固有の何かを試してみてください。