如何获得id的值

Question

我有一个具有id属性的组件，我想获取id的值。这是我的工作。

constructor(props) {
    super(props);

    this.state = {

      data: []

    }
    populate() {


      for (let i = 0; i < 5; i++) {

        data.push( < ChildComponent id = {
            i
          }
          />)

        }
      }

      getValue() {

        let tmp = data[0]

        alert(tmp.id)

      }

      render() {
        {
          this.populate
        }

        return (

          <
          Button onClick = {
            this.getValue
          } > alert ID < /Button>

        )
      }

    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

populate()将五个子组件插入数据。

getValue()是我要提醒组件ID的地方。

undefined正在收到警报

Answer 1

使用props.id。因为id不是组件tmp本身的属性。其存在于props中，因为id在此处prop

中以data.push(<ChildComponent id={i}/>)的形式传递

getValue(){
   let tmp = data[0]
   alert(tmp.props.id)
}

Answer 2

像这样尝试：

constructor(props){
   super(props);
}
getValue(){

    alert(this.child_0.props.id)

}

render(){

   return(
    <>
        {(new Array[5]).map((item, idx) => <ChildComponent ref={e => this['child_' + idx]} key={idx} id={idx}/>)}
        <Button onClick={this.getValue}>alert ID</Button>
    </>

    )
}

}