小编Ban*_*rew的帖子

在标准create-react-app配置中，有\xe2\x80\x99s一个第三方组件，我可以在需要时导入：

import { Button } from \'@mui/material\'\n\n// [\xe2\x80\xa6]\n<Button variant="|"></Button>\n

该库是完全类型化的，因​​此当光标位于 处时，在 VSCode 中点击Ctrl+将会显示我可以使用的可能的字符串变体列表。我可以通过创建一个包装的本地组件来添加另一个变体：Space|@mui/material/Button

// LocalComponent.js\nimport React from \'react\'\nimport { Button } from \'@mui/material\'\n\n// Do something to actually add a variant called `new`.\n\nexport const LocalComponent = React.forwardRef((props, ref) => {\n  return (\n    <Button ref={ref} {...props}>\n      {props.children}\n    </Button>\n  )\n})\n

// LocalComponent.d.ts\nimport type { ButtonProps } from \'@mui/material\'\n\ninterface Props extends ButtonProps {\n  /** @default \'text\' */\n  variant?: \'text\' | \'outlined\' | \'contained\' …

设置是一个“创建 React 应用程序”，具有以下内容jsconfig.json：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": "src"
  },
  "include": ["src"]
}

目录结构：

.
??? src
    ??? Components
        ??? Foo
            ??? Bar
            ?   ??? Bar.js
            ?   ??? Bar.d.ts
            ?   ??? index.js
            ??? Foo.js
            ??? index.js

// React component `Foo` imports a component `Bar`:

import { Bar } from './Bar'

export function Foo(props) {
  //
}

// And gets full intellisense via `Bar.d.ts`:

type Props = {
  /** ... */
}

export declare function Bar(
  props: Props …

这是我的API设置：

//-------------------------------------------------------------------------
// Define API endpoints once globally.
//-------------------------------------------------------------------------
$.fn.api.settings.api = {
  'find cool cats' : '/search/coolcats?query={value}'
};

该路由根据文档返回正确的JSON响应：

// For example, "http://localhost:3000/search/coolcats?query=cool" returns this limited array of results:

{
    "success": true,
    "results": [
        {
            "name": "Cool Cat Cooper",
            "value": "Cool Cat Cooper"
        },
        {
            "name": "Cool Cat Charlie",
            "value": "Cool Cat Charlie"
        },
        {
            "name": "Cool Cat Mittens",
            "value": "Cool Cat Mittens"
        }
    ]
}

我有时会将此HTML附加在表单内（与上述文档参考中的“ Favorite Animal”代码相同）：

var coolCatsField = '<div class="field">';
        coolCatsField += '<label>Find a …

我有很多.on()方法可以链接和对齐.我担心解释器可能会在此示例中的变量名后插入分号:

var foo = new Bar();

foo // Semicolon insertion here.
  .on()
  .on();

有没有办法保持这种结构,还是应该避免这样做？谢谢!