属性"流畅分隔器"在类型"JSX"上不存在。内在元素'

Question

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/**/*"]
}

packagesinstalled:

"@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

如何让它识别元素?

Answer 1

如果你在React中使用@fluentui/web-components，你需要使用文档中描述的包装器:

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());

样本CodeSandbox