react.js - React 语法问题关于：{} 和 {{}} 有什么区别？

Question

• 我把 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;

Answer 1

343434545它通过

Answer 2

menu={{ items }} 是缩写，变量名与key相同，可以省略key
等于
menu={{ items: items }}

还有这种

{    doAction() {}}

等于

{    doAction: () => {},    // 或    doAction: function() {}}

Answer 3

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的时候，没有这个变量，所以就报错了