Javascript Reactjs，当元素位于map（）中时无法获取ElementById

我在reactjs上遇到了一个问题

我需要将屏幕高度与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>
  );
}

因此，我无法访问div的id或类

知道为什么吗？我怎样才能接触到这些元素

注：代码显示是整体的一部分，地图处理其他条件。尽管如此，我还是检查了它，id对于这个div/图像是唯一的。

---

但是getElementsByClass=>null的问题也是一样的，React在渲染到真实DOM之前处理虚拟DOM，因此除非在调用ReactDOM.render之后执行测试语句，否则结果是可以预期的，否则元素仍然在React的虚拟DOM中

假设您将测试代码放置在正确的位置，例如，您是否尝试直接记录this.props.data？在您的情况下，它可能只是空的

---

此外，您的代码也有一个小问题，因为Arraymap生成一个值数组，可以有多个id为coucou的div，如果您不遵循最佳实践并使用

并通过this.couref访问

还请注意，您不需要将静态字符串用大括号括起来-className=image detail就可以了

---

此外，将数组索引指定为循环中的键也是一种不好的做法-尝试使用该项特有的东西，例如ID，它不会根据数组的顺序而改变。

“知道为什么吗？”–因为元素必须是DOM的一部分，才能通过document.getElementById进行选择。您在componentDidMount中尝试过它吗？我的坏小子，我没有写它，但是的，它来自componentDidMount！另外，为什么不使用react ref而不是ID呢？您也可以接受我所说的另一部分，并用className替换ID；这个.props.data确实是空的。渲染后如何执行调用？我认为这是事实的组成部分。我当时在你的问题评论中没有看到你的精确性。嘿，多米尼克！非常感谢你。由于我是一个人工作，我非常感谢这种反馈。我没有使用ref的原因是因为我得到了相同的结果。所以现在我尝试了和你在这里提出的相同的ref-syntax。。然后在componentDidMount中调用它，或者在fb文档中描述的另一个回调函数中调用它，但是我在this.coucouRef上一直有一个未定义的。

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>
);