Элемент объявления с идентификатором и доступ к нему в том же JSX

Question

Я динамически создал JSX, и 1 элемент динамически получает свой идентификатор:

{props.types[2].map((element, index) => {
            return (
              <tr key={index}>
                <td className="align-middle">
                  {element.Type &&
                    commonFuctions.splitCapitalLetterString(element.Type)}
                </td>
                <td className="align-middle">
                  <div className="slideThree">
                    <input
                      type="checkbox"
                      value="None"
                      id={element.Type}
                      name="check"
                    />
                    <label htmlFor={element.Type}></label>
                  </div>
                ....
                ....
                ....

Как вы видите, элемент, который получает динамически свойство id, является флажком. Ниже в том же JSX у меня есть:

{/**********************PENSION TYPES***************************************** */}
      {props.types[0].length > 0
        ? DataExtract.uniquePensionTypes(props.types[0]).map(
            (element, index) => {
              {
                console.log(document.getElementById(`${element}`));
              }
            }
          )
        : ""}
    </div>

Важная часть здесь это console.log. Аргумент в getElementById совпадает с идентификатором для флажка. Но по какой-то причине он не обнаруживает элемент и отображает ноль. Итак, мои вопросы почему? Можно ли вообще объявить id элемента и ниже в том же jsx для доступа к нему? Я даже пытался поставить stati c id для этого флажка и ниже, чтобы достичь его со значением stati c, но все еще не работает.

Answer 1

Вы можете использовать React ref API для доступа к домену.

Ссылки предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга.

document.getElementById отображает null, поскольку элемент html еще не создан. Прямой доступ к элементам DOM в React не рекомендуется.

Пример:

Компонент класса

import React, {Component} from 'react';

class MyComponent extends Component {

  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return (
      <table>
        {props.types[2].map((element, index) => {
          return (
            <tr key={index}>
              <td className="align-middle">
                {element.Type &&
                  commonFuctions.splitCapitalLetterString(element.Type)}
              </td>
              <td className="align-middle">
                <div className="slideThree">
                  <input
                    type="checkbox"
                    value="None"
                    id={element.Type}
                    name="check"
                    ref={this.myRef}
                  />
                  <label htmlFor={element.Type}></label>
                </div>
              </td>
            </tr>
          );
        })}
      </table>
    );
  }
}

Функциональный компонент

import React, {useRef} from 'react'

function SomeComponent(props) {
  const inputEl = useRef(null);

  return (
    <table>
      {props.types[2].map((element, index) => {
        return (
          <tr key={index}>
            <td className="align-middle">
              {element.Type &&
                commonFuctions.splitCapitalLetterString(element.Type)}
            </td>
            <td className="align-middle">
              <div className="slideThree">
                <input
                  type="checkbox"
                  value="None"
                  id={element.Type}
                  name="check"
                  ref={inputEl}
                />
                <label htmlFor={element.Type}></label>
              </div>
            </td>
          </tr>
        );
      })}
    </table>
  );
}

Answer 2

Мы не можем получить доступ к элементам dom в методе рендеринга. Render просто отображает изменения в Virtual DOM, а не в реальном DOM.

Если вы хотите получить доступ к элементам, отображаемым в DOM, сделайте то же самое в ComponentDidMount или ComponentDidUpdate.