t.js:1229 Uncaught Error: React.Children.only expected to receive a single React element child. at Object.onlyChild [as only] (react.development.js:1229:1) at renderOverlay (dropdown.js:138:1) at Overlay.js:10:1 at mountMemo (react-dom.development.js:17225:1) at Object.useMemo (react-dom.development.js:17670:1) at useMemo (react.development.js:1650:1) at Overlay.js:7:1 at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-do
时间: 2024-02-12 21:04:01 浏览: 38
根据错误提示,这是因为在 Dropdown 中的 Menu 组件中存在多个子元素,而 Ant Design 的 Dropdown 组件只允许 Menu 组件中包含一个子元素。你可以检查一下代码,确保 Menu 组件只有一个子元素。
如果你希望在 Dropdown 中展示多个菜单项,可以使用 MenuItem 或者 Menu.ItemGroup 组件,将它们作为 Menu 组件的子组件来添加。以下是一个示例代码:
```
import { Dropdown, Menu } from 'antd';
const menu = (
<Menu>
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
</Menu>
);
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
Hover me
</a>
</Dropdown>
```
这里的 menu 变量是一个包含多个 MenuItem 的 Menu 组件。注意,Menu 组件必须作为 Dropdown 组件的 overlay 属性传入。
相关问题
react-dom.development.js:29345 Uncaught Error: createRoot(...): Target container is not a DOM element.
这个错误通常是由于没有找到正确的 DOM 元素导致的,可以根据错误信息中的提示信息来检查代码。
通常情况下,这个错误是由于使用了错误的选择器或者没有正确的渲染目标元素导致的。请确保在页面中存在一个具有正确 ID 的元素,并将其传递给 `createRoot` 方法。
下面是一个示例代码,演示如何使用正确的 ID 选择器来获取目标元素:
```jsx
import React from "react";
import ReactDOM from "react-dom";
function App() {
return <h1>Hello World!</h1>;
}
// 通过 ID 选择器获取目标元素
const rootElement = document.querySelector("#root");
// 使用 createRoot 进行挂载
ReactDOM.createRoot(rootElement).render(<App />);
```
在这个示例中,我们使用 `document.querySelector("#root")` 方法来获取具有 `id="root"` 的元素,然后将其传递给 `createRoot` 方法进行挂载。
报错react-dom.development.js:49 Uncaught Invariant Violation: Target container is not a DOM element.
这个错误通常发生在 React 应用中,意味着目标容器不是一个 DOM 元素。这可能是由于以下原因之一导致的:
1. 目标容器不存在:请确认你的 HTML 文件中是否存在一个与你在 React 组件中指定的容器元素相匹配的 DOM 元素。确保容器元素的 ID 或类名与你在组件中使用的目标容器相匹配。
2. 目标容器指定错误:检查你在组件中指定的目标容器是否正确。确保使用正确的选择器或引用来选择目标容器。
3. 容器元素未在加载时可用:如果你的 React 应用脚本在容器元素加载之前执行,那么容器元素可能还不存在。确保你的脚本在页面加载完成后再执行,或者使用包装函数(如`DOMContentLoaded`事件)来确保容器元素已经存在。
请检查这些可能的原因,并根据具体情况进行调试和修复。如果问题仍然存在,请提供更多代码和上下文信息,以便我能够提供更准确的帮助。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)