如何通过父元素中的“ id”访问（自定义组件的）元素？ （ReactJS.Net）

Question

我希望以下内容非常容易，这可能是导致我在网络上找不到解决方案的原因的原因：

我想在父组件中使用document.getElementById（“ id”）引用由我的自定义组件构成的元素。

我创建了两个反应组件，其中一个在render函数中包含另一个。我给了内部元素（我将其称为“ 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内部渲染。由于某种原因，我只是无法从文档中访问它。

我的搜索基本上导致未反应js，比使用document.getElementById()解释“更好”的内容以及假设我已经走到这一步的问题。最后是可以理解的，但对我却不是很有帮助。任何帮助将不胜感激。

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

Answer 1

我确实设法找到了可行的解决方案。但是，以下内容可能并不适合所有用户，请记住这一点。

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

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

感觉有些错落有致，但确实可以做到。从这一点出发，可以在必要时更改或访问c1的属性，只要这些属性也已分配给最外面的<div>。