如何通过元素在其父元素中的'id'来访问(自定义组件的)元素？(ReactJS.Net)

Question

我希望以下内容过于简单，这可能解释了为什么我在网上找不到解决方案的原因：

我想在父组件中使用 document.getElementById("id") 引用从我的自定义组件中制作的元素。

我创建了几个反应组件，其中一个在渲染函数中包含另一个组件。我已经给了内部元素(我将它称为"c1"，外部称为"c0")一个 id="myID"，我想使用document.getElementById("myID").myValue引用它。但是，每当我尝试以这种方式访问它时，我都会收到错误消息TypeError: Unable to get property 'myValue' of undefined or null reference.C1 确实有一个属性"myValue"，尽管我认为这对这个特定错误无关紧要。

这有效地将一对组件简化为相关部分：

import React, {Component} from 'react';
import {c1} from './c1.js';
export class c0 extends Component
{
displayName = c0.name
constructor(props)
{
super(props);
this.state = {
testValue: ""
}
{
componentDidUpdate() {
this.setState({
testValue: document.getElementById("myID").id
});
}
render() {
return (
<div id="testID">
<c1 id="myID" />
</div>
);
}
}

import React, {Component} from 'react';
export class c1 extends Component
{
displayName = c1.name
constructor(props)
{
super(props);
{
render() {
return (
<div>
<p>Here is some content</p>
</div>
);
}
}

需要明确的是，c1是从c2 中渲染的。由于某种原因，我无法从文档中访问它。

我的搜索基本上导致了非reactjs，解释了什么比使用document.getElementById()"更好"，以及假设我已经走到这一步的问题。最后一个是可以理解的，但对我来说不是很有帮助。任何帮助将不胜感激。

编辑：经过进一步检查，该组件似乎仅呈现为其包含的 html 元素集。在提供的示例中，document.getElementById("testID").firstChild返回HTMLDivElement。具体来说，它返回 c1render()函数中最外层的 HTMLElement。我认为这在某种程度上是正常的，但我不确定。通过"id"直接访问仍返回 null。

Answer 1

我确实设法找到了一个可行的解决方案。但是，以下内容可能不足以满足所有用户的需求，因此请记住这一点。

在 c1 的render函数中，我为最外层<div>分配了与 c1 本身相同的 id，如下所示：

<div id={this.props.id}>.

感觉有点拼凑，但它可以完成工作。从这一点开始，可以在必要时更改或访问 c1 的属性，只要这些属性也已分配给该最外层<div>。