带有 id 的声明元素并在同一个 JSX 中访问它

Question

我已经动态创建了 JSX，并且 1 个元素正在动态获取它的 ID：

{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中声明元素的id及以下来访问它？我什至尝试在此复选框及其下方放置静态 ID，以使用它的静态值访问它，但仍然无法正常工作。

Answer 1

我们无法在 render 方法中访问 dom 元素。渲染只是在虚拟 DOM 上而不是在实际 DOM 上渲染更改。

如果您想访问在 DOM 上呈现的元素，请在 ComponentDidMount 或 ComponentDidUpdate 中执行相同操作。

Answer 2

您可以使用 React ref api 访问 dom。

Refs 提供了一种访问 DOM 节点或在 render 方法中创建的 React 元素的方法。

document.getElementById 正在显示 null，因为尚未创建 html 元素。不建议直接访问React 中的DOM 元素。

示例：

类组件

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>
  );
}