如何为querySelectorAll匹配到的每个DOM元素渲染对应React组件

问题根源梳理 #

1. 首先HTML规范要求同个页面内id属性必须唯一，你想给多个元素挂载React组件，绝对不能用相同id的#card作为选择器，要改用class标记挂载点。
2. 你最初的代码报错Target container is not a DOM element，是因为querySelectorAll返回的是NodeList集合，而ReactDOM.render的第二个参数要求是单个DOM元素，直接传集合当然不兼容。
3. 后续代码的重复输出、无法渲染，是因为你写的App组件存在多处语法错误，同时多次渲染App组件会重复执行组件内的顶层代码，所以你有N个挂载点就会输出N次console.log内容，和你贴的栈输出对应。

修正后的实现方案 #

1. 调整HTML挂载点

用class代替重复id标记所有需要挂载的位置：

<div class="react-card-mount"></div>
<div class="react-card-mount"></div>
<div class="react-card-mount"></div>

2. 修复React代码（React 17及更早版本）

// 可自定义每个卡片的数据源
const cardList = [
  { cardNumber: "卡片1" },
  { cardNumber: "卡片2" },
  { cardNumber: "卡片3" }
];

// 修正组件语法错误
const App = (props) => {
  return (
    <div className="card_container">
      <div>{props.cardNumber}</div>
    </div>
  );
};

// 遍历所有挂载点逐个渲染
const mountNodes = document.querySelectorAll(".react-card-mount");
if (mountNodes.length) {
  mountNodes.forEach((node, index) => {
    // 给每个组件传入对应位置的自定义数据
    ReactDOM.render(<App cardNumber={cardList[index].cardNumber} />, node);
  });
}

3. 如果你使用React 18+版本

ReactDOM.render已弃用，需要改用createRoot写法：

import { createRoot } from "react-dom/client";

const cardList = [
  { cardNumber: "卡片1" },
  { cardNumber: "卡片2" },
  { cardNumber: "卡片3" }
];

const App = (props) => {
  return (
    <div className="card_container">
      <div>{props.cardNumber}</div>
    </div>
  );
};

const mountNodes = document.querySelectorAll(".react-card-mount");
if (mountNodes.length) {
  mountNodes.forEach((node, index) => {
    const root = createRoot(node);
    root.render(<App cardNumber={cardList[index].cardNumber} />);
  });
}

内容的提问来源于stack exchange，提问作者journalsup