同一页面如何让React在多个.react-container节点渲染对应数量的组件

问题核心原因 #

1. 你在App组件内部再次定义了带.react-container类的节点，每次渲染App都会新增一个符合选择器的DOM节点，导致后续查询选择器时会拿到这些动态生成的节点，触发额外的渲染，这就是日志多输出一次running(1)的原因。
2. 所有App实例共用同一个全局ArrayOne，没有给不同位置的实例传递独立的数据源，无法实现不同容器渲染不同长度的卡片。

解决步骤 #

第一步：修改App.js代码

移除内部多余的.react-container节点，新增props接收当前实例要渲染的卡片数据：

// App.js
// 入参新增cardList props，接收当前实例要渲染的数组
const App = ({ cardList, state }) => {
  return (
    <>
      {
        cardList.map(item=> (
          <div 
            key={item.id} // 必须加唯一key，否则React会抛出警告
            className={clsx({
              'card': true,
              'card-visible': state
            })} 
          >
            <h2>{item.title}</h2>
            <p>{item.text}</p>
          </div>
        ))
      }
    </>
  );
};

注意：如果原来的state是App内部定义的可以保留，我这里作为props传递是为了适配外部控制的场景，你可以根据自己的实际逻辑调整

第二步：修改index.js代码

提前缓存初始DOM的容器节点，给每个App实例传递对应长度的数组：

// index.js
// 按页面上.react-container的顺序定义每个容器要渲染的数据
const containerCardList = [
  ArrayOne.slice(0, 4), // 第一个容器渲染前4项
  ArrayOne.slice(0, 1)  // 第二个容器渲染前1项
];

// 只在初始加载时查询一次原生DOM节点，避免拿到后续React动态生成的节点
const rootContainers = document.querySelectorAll(".react-container");

for (let i = 0; i < rootContainers.length; i++) {
  ReactDOM.render(
    <App 
      cardList={containerCardList[i]} 
      // 你的state如果是外部定义的也可以在这里传递
    />, 
    rootContainers[i]
  );
}

修改完成后就不会出现额外的渲染，不同容器会按配置渲染对应数量的卡片，日志输出也会符合预期。

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