ReactJS中如何在指定元素上渲染组件？报错求助

错误原因分析 #

1. ReactDOM导入错误：ReactDOM不属于react包，你错误地从react中解构导入，导致ReactDOM为undefined，触发Cannot read properties of undefined (reading 'render')错误。
2. 不符合React编程范式：手动使用ReactDOM.render直接挂载组件到DOM元素的方式，违背了React的声明式渲染原则，容易引发DOM不一致、状态管理混乱等问题。
3. 原组件缺少返回值：你的Shop组件没有返回JSX内容，这本身就是一个语法错误，会导致组件无法正常渲染。

正确实现方式 #

我们使用React的条件渲染，通过showCart状态控制Cart组件的显示/隐藏，并将其放在按钮所在div的上方，完全遵循React的声明式逻辑：

修改后的Shop组件代码 #

import React, { useState } from "react";
import Cart from "./components/cart";

function Shop() {
  const [showCart, setShowCart] = useState(false);

  const cartPreview = () => {
    // 只需要切换状态即可，无需手动操作DOM
    setShowCart(prev => !prev);
  };

  // 必须返回JSX内容
  return (
    <div>
      {/* 根据状态渲染Cart组件，放在按钮div上方 */}
      {showCart && <Cart />}
      <div className="flex justify-center m-auto w-full">
        <button
          onClick={cartPreview}
          className="hover:bg-green-800 shadow-md bg-green-900 text-gray-100 rounded-md p-2 h-10"
        >
          Add To Cart
        </button>
      </div>
    </div>
  );
}

export default Shop;

关键改进点 #

• 修正导入：移除错误的ReactDOM导入，只保留必要的react和Cart组件导入。
• 条件渲染：用{showCart && <Cart />}在按钮div上方渲染Cart组件，状态为true时显示，false时隐藏。
• 简化事件函数：cartPreview只需切换showCart状态，避免手动操作DOM。
• 补全组件返回值：添加return语句返回完整的JSX结构，确保组件能正常渲染。

如果你确实需要将Cart挂载到某个特定的DOM元素（比如页面其他位置），可以使用createPortal（React的官方API），示例如下：

使用createPortal的场景（可选） #

1. 首先在public/index.html中添加一个挂载容器：

<div id="cart-root"></div>

2. 修改Shop组件：

import React, { useState } from "react";
import { createPortal } from "react-dom";
import Cart from "./components/cart";

function Shop() {
  const [showCart, setShowCart] = useState(false);
  const cartRoot = document.getElementById('cart-root');

  const cartPreview = () => {
    setShowCart(prev => !prev);
  };

  return (
    <div>
      <div className="flex justify-center m-auto w-full">
        <button
          onClick={cartPreview}
          className="hover:bg-green-800 shadow-md bg-green-900 text-gray-100 rounded-md p-2 h-10"
        >
          Add To Cart
        </button>
      </div>
      {/* 使用Portal将Cart挂载到指定DOM元素 */}
      {showCart && cartRoot && createPortal(<Cart />, cartRoot)}
    </div>
  );
}

export default Shop;

但针对你的需求（将Cart放在按钮div上方），第一种条件渲染的方式是最简单、最符合React规范的实现。

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