- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 antd 3.15 和 GraphQL 来获取数据并在 Menu 内生成 SubMenu 和 Menu.Item 的列表。但是,我收到了这样的错误消息 Uncaught TypeError: Cannot read property 'isRootMenu' of undefined
我不知道我的代码出了什么问题。 isRootMenu
不是文档中任何位置列出的 Prop 。 ant.design/components/menu/#header当我对所有 SubMenu 和 Menu.List 进行硬编码时,没有问题。我可以从 GraphQL 迭代数据来生成 SubMenu 和 Menu.List 吗?
有人可以帮我解决这个问题吗?谢谢你!这是我的代码:
import * as React from 'react';
import './SideNav.scss';
import { Menu, Icon } from 'antd';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
const FLOORS_QUERY = gql`
query {
getAllFloors {
id
floorName
rooms {
id
roomName
roomNumber
roomDescription
}
}
}
`;
export default class SideNav extends React.Component {
render() {
return (
<Menu theme="light" defaultSelectedKeys={['1']} mode="inline">
<Query query={FLOORS_QUERY}>
{({ loading, error, data }) => {
if (loading) return <h4> loading... </h4>;
if (error) console.log(error);
console.log(data);
return (
<React.Fragment>
{data.getAllFloors.map((floor) => (
<SubMenu
key={floor.id}
title={
<span>
<Icon type="plus" />
<span>{floor.floorName}</span>
</span>
}
>
<React.Fragment>
{floor.rooms.map((room) => (
<Menu.Item key={room.id}>{room.roomNumber}</Menu.Item>
))}
</React.Fragment>
</SubMenu>
))}
</React.Fragment>
);
}}
</Query>
</Menu>
);
}
}
最佳答案
您应该将 Prop 传递到子菜单。
const CustomComponent = (props) => (
<Menu.SubMenu title='SubMenu' {...props}>
<Menu.Item>SubMenuItem</Menu.Item>
</Menu.SubMenu>
)
因此,解决您的问题的方法是执行以下操作;
const FloorMapSubMenu = ({ id, floorName, rooms, ...other }) => {
return (
<Menu.SubMenu
key={id}
title={
<span>
<Icon type="plus" />
<span>{floorName}</span>
</span>
}
{...other} // notice the other props, this is were the 'isRootMenu' is injected from the <Menu> children
>
<React.Fragment>
{rooms.map((room) => (
<Menu.Item key={room.id}>{room.roomNumber}</Menu.Item>
))}
</React.Fragment>
</Menu.SubMenu>
)
}
class SideNav extends React.Component {
render() {
return (
<Query query={FLOORS_QUERY}>
{({ loading, error, data }) => {
if (loading) return <h4> loading... </h4>
if (error) console.log(error)
console.log(data)
return (
<Menu theme='light' defaultSelectedKeys={['1']} mode='inline'>
{data.getAllFloors.map((floor, i) => (
<FloorMapSubMenu key={i} id={floor.id} floorName={floor.floorName} rooms={floor.rooms} />
))}
</Menu>
)
}}
</Query>
)
}
}
关于reactjs - antd SubMenu "TypeError: Cannot read property ' isRootMenu' 未定义",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55164824/
阅读有关 Ant Design 的信息,我对使用哪个库进行移动 Web 开发感到困惑。有两个库,antd和 antd-mobile .虽然很明显 antd-mobile 在 iOS 和 Android
我已经将 antd 更新到 5.0.0。我现在有这些导入错误。 @import '~antd/es/style/themes/default.less'; @import '~antd/dist/an
我已经将 antd 更新到 5.0.0。我现在有这些导入错误。 @import '~antd/es/style/themes/default.less'; @import '~antd/dist/an
我们如何隐藏表格中的列以在前端显示,该列已存在于使用 Ant 设计表的数组中? 例如,我的数组对象中有一个名为 ID 的列,但不需要在表 View 中显示,它应该保存在 JSON 列表本身中以供引用。
版本3.0.3 环境个人电脑, Chrome 转载链接 https://codesandbox.io/s/my02ok19wy 重现步骤现在,Table 可以通过两种方式扩展行: 在第一列使用图标 单
版本3.0.3 环境个人电脑, Chrome 转载链接 https://codesandbox.io/s/my02ok19wy 重现步骤现在,Table 可以通过两种方式扩展行: 在第一列使用图标 单
如何从 ant d 模态中隐藏顶部的 X 按钮,以及如何禁用使用 ESC 键关闭模态的行为 return ( {modalBodyText} ); 最佳答案 基于documentation版本
这个 GatsbyJS/antd 插件页面 ( https://github.com/bskimball/gatsby-plugin-antd/issues/2 ) 使得在使用 GatsbyJS 时似
有人可以举例说明如何使用 get Font Awesome 与 AntD 框架一起工作吗?他们提到您可以将 SVG 与外部图标一起使用。 谢谢, 塔类 最佳答案 不直接,但您可以自己制作 IconFo
我在 React 应用程序中使用 AntD。我想在表格单元格中添加一个图标,但我遇到了问题。我的特定列的代码如下: : } /> 我得到的第一个错误是 意外使用“状态”其中在我的数据源中,状态是
在 Bootstrap 4 中,您可以使用以下实用程序: Bootstrap includes a wide range of shorthand responsive margin and padd
我正在为 Next.js 项目使用 antd npm 包。我正在努力更改 Form.Item 组件的标签文本颜色。 我在下面尝试,但它没有改变标签颜色。 最佳答案 使用 CS
我想在遇到某些断点时隐藏一些 div,在 bootstrap v4 中有类似的东西:hidden-sm-down 阅读网格文档后,设置 可能是解决方案 这是我的例子:http://codepen.io
如果我输入无效的邮件 ID,我需要使用 antd 工具提示显示“无效的电子邮件!!”。如何在ReactJS antd Form中使用它?我现在使用的代码是:
我正在使用 antd-mask-input我的 Ant Design 应用程序上的库将掩码放入我的 antd form 的字段中.这个 antd-mask-input 库是使用这个 inputmask
没有那个文件或目录,当使用 Vite 和 Antd Pro Layout 时 这是文件vite.config.ts: import { defineConfig } from 'vite'; impo
我正在通过 ant-design (antd) 库开发一个 reactjs 元素。我想在我的元素中使用 Carousel 组件。当我将内容的背景色 - 应显示在轮播内 - 设置为#FFF 时,元素符号
我有问题 ./src/index.js 找不到模块:无法解析 '~ antd/dist/antd.css',我无法修复它。我试着把@import '~ antd/dist/antd.css'; .在
当我尝试在 ant design 中使用 react 进行这样的导入时 import {UserOutlined, LockOutlined} from '@ant-design/icons' 我收
我有一个 antd 面板作为折叠/ Accordion 元素的一部分,我正在尝试设置样式并呈现文本的附加部分作为标题的一部分。我通读了他们的文档,他们允许您使用 extra 属性添加额外的元素,但我似
我是一名优秀的程序员,十分优秀!