Question

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <span>Is React a JavaScript library for building user-interfaces?</span>,
  document.getElementById("question1")
)
ReactDOM.render(
  <form class="options">
    <input type="radio" value="Yes" />
    <input type="radio" value="No" />
  </form>,
  document.getElementsByClassName("options-main-container")
);

此代码有什么问题？？？我尝试了不同的方法，但无法解决此问题请任何人帮我解决这个问题

Answer 1

是的，可以在同一页面上多次调用ReactDOM.render。

这是问题所在，

document.getElementsByClassName("options-main-container")

这将返回array个具有类名options-main-container的元素。因此，您无法使用此代码直接呈现元素。您需要遍历数组或仅接受1st个匹配元素，如

document.getElementsByClassName("options-main-container")[0] //This will get the 1st matching element

Answer 2

您可以使用querySelector代替getElementsByClassName。因为getElementsByClassName返回节点列表数组，而querySelector返回第一个匹配的元素。

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <span>Is React a JavaScript library for building user-interfaces?</span>,
  document.getElementById("question1")
)
ReactDOM.render(
  <form class="options">
    <input type="radio" value="Yes" />
    <input type="radio" value="No" />
  </form>,
  document.querySelector(".options-main-container")
);

我们可以在两个不同的div中渲染两个不同的内容吗？

2 个答案: