Как я могу получить доступ к элементу (из пользовательского компонента) по его идентификатору в родительском элементе?(ReactJS.Net) - PullRequest
Новая
       22

Как я могу получить доступ к элементу (из пользовательского компонента) по его идентификатору в родительском элементе?(ReactJS.Net)

0 голосов
/ 28 мая 2019

Я ожидаю, что следующее слишком легко, что, вероятно, объясняет, почему у меня возникли проблемы с поиском решения в Интернете:

Я хотел бы сослаться на элементы, сделанные из моих пользовательских компонентов, с помощью идентификаторов, используя документ.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.Я просто не могу получить к нему доступ из документа по какой-то причине.

Мои поиски в основном привели к нереагирующим действиям, объяснениям того, что "лучше", чем использование document.getElementById(), и вопросам, которые предполагают, что яуже получил это далеко.Последнее понятно, но не очень полезно для меня.Любая помощь будет принята с благодарностью.

Редактировать: При дальнейшей проверке компонент, похоже, отображается исключительно как набор html-элементов, которые он содержит.В приведенном примере document.getElementById("testID").firstChild возвращает HTMLDivElement.В частности, он возвращает то, что HTMLElement является самым внешним в функции c1 render().Я предполагаю, что это в какой-то степени нормально, но я не знаю наверняка.Прямой доступ по id все равно возвращает ноль.

1 Ответ

0 голосов
/ 30 мая 2019

Мне удалось найти работоспособное решение. Однако следующего может быть недостаточно для всех пользователей, поэтому имейте это в виду.

В функции render c1 я присвоил внешнему <div> тот же идентификатор, что и самому c1, например:

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

Чувствуется немного лоскутное одеяло, но это делает работу. С этого момента свойства c1 могут быть изменены или доступны при необходимости, при условии, что эти свойства также были назначены этому внешнему <div>.

...