typescript 类型“JSX.IntrinsicElements”上不存在属性“fluent-divider”

0qx6xfy6 于 2023-03-09 发布在 TypeScript

关注(0)|答案(1)|浏览(245)

import * as React from 'react'
import {
    provideFluentDesignSystem,
    fluentDivider
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentDivider()
    );

然后

<fluent-divider></fluent-divider>

我得到这个错误：

Property 'fluent-divider' does not exist on type 'JSX.IntrinsicElements'

我还尝试删除node-modules文件夹并重新安装所有的软件包，但问题仍然存在。
tsconfig.json：

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 16",
  "compilerOptions": {
    "allowJs": true,
    "lib": ["es2021", "dom", "dom.iterable"], // https://www.e-learn.cn/topic/3468143
    //"module": "commonjs",
    "module": "ES2015", // https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/webpack
    "importHelpers": true,  // https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/webpack
    "noEmitOnError": true, // https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/webpack
    "target": "es2019",
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "jsx": "react",
    "noImplicitAny": false,
    "sourceMap": true,
    "baseUrl": "./src",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "paths": {
      "@app/*": ["app/*"],
      "*": ["node_modules/*"]
    }
  },
  "include": ["./src/**/*"]
}

已安装packages：

"@fluentui/react": "8.91.1",
"@fluentui/react-components": "^9.7.2",
"@fluentui/web-components": "2.0.0",
"@types/fluent": "^0.11.4",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9

如何使它识别元素？

typescript

来源：https://stackoverflow.com/questions/74776466/property-fluent-divider-does-not-exist-on-type-jsx-intrinsicelements

1条答案

按热度按时间

ep6jt1vc1#

如果您使用的是带有React的@fluentui/web-components，则需要使用如下文档中所述的 Package 器：

import { provideFluentDesignSystem, fluentCard, fluentButton } from '@fluentui/web-components';
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
import React from 'react';

const { wrap } = provideReactWrapper(React, provideFluentDesignSystem());

export const FluentCard = wrap(fluentCard());
export const FluentButton = wrap(fluentButton());

Sample CodeSandbox

赞(0）回复(0）举报 2023-03-09

我来回答

typescript 类型“JSX.IntrinsicElements”上不存在属性“fluent-divider”

1条答案

相关问题

热门标签

最新问答