输入'{标签:字符串; }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'
Type '{ label: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'
我正在使用 Fluent UI,导入了 Toggle 组件并导出了一个 UI Toggle:
export const UIToggle: React.FunctionComponent = () => {
return (
<Stack tokens={stackTokens}>
<Toggle label="Enabled and checked" defaultChecked onText="On" offText="Off" />
</Stack>
);
};
但是当我想使用它并更新 'label' 属性时:
<UIToggle label = "Turn on"></UIToggle>
这里是错误:
Type '{ label: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
Property 'label' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'
谁能解释为什么会出现这个错误,我该如何解决?
我需要提供标签作为接口的参数。经过以下修改,现在运行良好
import * as React from 'react';
import { Stack, IStackTokens } from '@fluentui/react/lib/Stack';
import { Toggle } from '@fluentui/react/lib/Toggle';
const stackTokens: IStackTokens = { childrenGap: 10 };
interface ILabels {
label: string
}
export const UIToggle: React.FunctionComponent<ILabels> = (props) => {
return (
<Stack tokens={stackTokens}>
<Toggle label={props.label} defaultChecked onText="On" offText="Off" />
</Stack>
);
};
我正在使用 Fluent UI,导入了 Toggle 组件并导出了一个 UI Toggle:
export const UIToggle: React.FunctionComponent = () => {
return (
<Stack tokens={stackTokens}>
<Toggle label="Enabled and checked" defaultChecked onText="On" offText="Off" />
</Stack>
);
};
但是当我想使用它并更新 'label' 属性时:
<UIToggle label = "Turn on"></UIToggle>
这里是错误:
Type '{ label: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
Property 'label' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'
谁能解释为什么会出现这个错误,我该如何解决?
我需要提供标签作为接口的参数。经过以下修改,现在运行良好
import * as React from 'react';
import { Stack, IStackTokens } from '@fluentui/react/lib/Stack';
import { Toggle } from '@fluentui/react/lib/Toggle';
const stackTokens: IStackTokens = { childrenGap: 10 };
interface ILabels {
label: string
}
export const UIToggle: React.FunctionComponent<ILabels> = (props) => {
return (
<Stack tokens={stackTokens}>
<Toggle label={props.label} defaultChecked onText="On" offText="Off" />
</Stack>
);
};