javascript - 使用 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 相同。但由于某种原因，它没有发现该元素并且显示为 null。所以我的问题是为什么？是否可以在同一个 jsx 中声明元素及其以下元素的 id 来访问它？我什至尝试为此复选框添加静态 ID，并在下面使用它的静态值来访问它，但仍然无法正常工作。

Answer 1

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

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