React 语法问题关于:{} 和 {{}} 有什么区别?

作者站长头像
站长
· 阅读数 6
  • 我把 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;

React 语法问题关于:{} 和 {{}} 有什么区别?React 语法问题关于:{} 和 {{}} 有什么区别?

回复
1个回答
avatar
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的时候,没有这个变量,所以就报错了

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容