React 语法问题关于:{} 和 {{}} 有什么区别?
- 我把
items
换成ccc
为什么就提示有问题?直接就挂了?
import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown, Space } from 'antd';
const items: MenuProps['items'] = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
),
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item
</a>
),
},
];
export const Frame = () => {
const actions: MenuProps['items'] = [
{
key: '1',
label: (
<Button type="link" rel="noopener noreferrer">退出</Button>
)
}
];
return (
<Dropdown menu={{ items }} placement="bottomLeft">
<Button>bottomLeft</Button>
</Dropdown>
)
}
export default Frame;
回复
1个回答
test
2024-06-26
React绑定动态数据是通过单花括号{}
,双花括号表示你绑定了一个对象。js的对象,key和value一样时可以简写。比如
const name = "zhangsan"
const obj = { name }
// 等于 const obj = { name: name }
console.log(obj.name) // zhangsan
所以你绑定items
实际是绑定了一个{items:items}
的对象,类似于<Dropdown menu={{ items:items }}>
。你换成ccc
的时候,没有这个变量,所以就报错了
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容