鍍金池/ 問(wèn)答/HTML/ react 中的 componentDidMount 無(wú)法獲取真實(shí)dom

react 中的 componentDidMount 無(wú)法獲取真實(shí)dom

在 render 中設(shè)置 ref 后，componentDidMount 中無(wú)法獲取真實(shí)節(jié)點(diǎn)，具體代碼如下，請(qǐng)指教？

export default class Content extends Component{
  componentDidMount() {
    console.log(this.p);
  }

  render() {
    const arr = [{content:'內(nèi)容一'},{content:'內(nèi)容二'},{content:'內(nèi)容三'}];
    
    const domP = arr.map((item,i) => {
      return <p ref={(dom) => this.p = dom} key={i}>{item.content}</p>
    });
    retuen (
      <div>
        {domP}
      </div>
    );
  }
}
回答
編輯回答
笑浮塵

先說(shuō)原因：map方法遍歷數(shù)組導(dǎo)致this.p被不斷的重新賦值，所以最后在componentDidMount中拿到的永遠(yuǎn)都是數(shù)組最后一次遍歷創(chuàng)建的dom節(jié)點(diǎn)。
提供解法：

export default class Content extends Component{
  componentDidMount() {
    console.log(this.p0);
    console.log(this.p1);
    console.log(this.p2);
  }

  render() {
    const arr = [{content:'內(nèi)容一'},{content:'內(nèi)容二'},{content:'內(nèi)容三'}];
    
    const domP = arr.map((item,i) => {
      return <p ref={(dom) => this['p' + i] = dom} key={i}>{item.content}</p>
    });
    retuen (
      <div>
        {domP}
      </div>
    );
  }
}
2017年5月22日 04:18