输入'{标签：字符串； }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'答案

【问题标题】：Type '{ label: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'输入'{标签：字符串； }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'
【发布时间】：2021-12-18 05:53:03
【问题描述】：

我正在使用 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>
  );
};

但是当我想使用它并更新“标签”属性时：

<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; }'

谁能解释为什么会出现这个错误以及我该如何解决？

【问题讨论】：

您是否尝试将label 传递给函数，例如：React.FunctionComponent = ({label}) => {...？

标签： javascript reactjs typescript fluent-ui fluentui-react

【解决方案1】：

我需要提供标签作为接口的参数。通过以下修订，它现在运行良好

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

【讨论】：