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

【问题标题】：How can I access an element (of a custom component) by its 'id' within its parent? (ReactJS.Net)如何通过其父级中的“id”访问（自定义组件的）元素？ (ReactJS.Net)
【发布时间】：2019-10-14 07:44:35
【问题描述】：

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

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

我创建了几个 react 组件，其中一个包含在渲染函数中的另一个。我给内部元素（我将其称为'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。具体来说，它返回 c1 的 render() 函数中最外层的任何 HTMLElement。我认为这在某种程度上是正常的，但我不确定。通过 'id' 直接访问仍然返回 null。

【问题讨论】：

您可能已经检查过这个，但是那个组件和它的 ID 是唯一的吗？因为如果不是这样，无论您尝试渲染什么，都会有两次相同的 id。
是的，id 是唯一的。我仔细检查了一遍。不过，这是一件值得关注的好事情 - 我没有想到这一点。
给 c1 实例周围的 'div' 提供了一个 ID 为“testID”，document.getElementById("testID").firstChild 返回 HTMLDivElement，而 document.getElementById("myID") 返回 null。（不幸的是，这还不够。）
@KevinJohnson（我想我应该让你知道我已经回复了，哎呀。）
最后一件事要验证的是 id 实际上是传递给 c1。如果在查询父 DIV 时返回 div 元素，请验证子 ID 是否已实际设置因为它没有在模板渲染函数或构造函数中显式设置，而“testID”为 .

标签： reactjs.net

【解决方案1】：

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

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

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

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

【讨论】：