react 中的 componentDidMount 无法获取真实dom

Question

在 render 中设置 ref 后，componentDidMount 中无法获取真实节点，具体代码如下，请指教？export default class Content extends Component{  componentDidMount() {    console.log(this.p);  }  render() {    const arr = [{content:'内容一'},{content:'内容二'},{content:'内容三'}];        const domP = arr.map((item,i) => {      return <p ref={(dom) => this.p = dom} key={i}>{item.content}</p>    });    retuen (      <div>        {domP}      </div>    );  }}

Answer 1

先说原因：map方法遍历数组导致this.p被不断的重新赋值，所以最后在componentDidMount中拿到的永远都是数组最后一次遍历创建的dom节点。

提供解法：

export default class Content extends Component{

  componentDidMount() {

    console.log(this.p0);

    console.log(this.p1);

    console.log(this.p2);

  }

  render() {

    const arr = [{content:'内容一'},{content:'内容二'},{content:'内容三'}];

    

    const domP = arr.map((item,i) => {

      return <p ref={(dom) => this['p' + i] = dom} key={i}>{item.content}</p>

    });

    retuen (

      <div>

        {domP}

      </div>

    );

  }

}