Estoy usando Fluent UI, importé el componente Toggle y obtuve un UI Toggle exportado:
export const UIToggle: React.FunctionComponent = () => { return ( <Stack tokens={stackTokens}> <Toggle label="Enabled and checked" defaultChecked onText="On" offText="Off" /> </Stack> ); };pero cuando quiero usarlo y actualizar el atributo 'etiqueta':
<UIToggle label = "Turn on"></UIToggle>aquí está el error:
Type '{ label: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'label' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'¿Alguien puede explicar por qué aparece este error y cómo puedo solucionarlo?
Necesito proporcionar una etiqueta como argumento para la interfaz. Con la siguiente revisión, está funcionando bien ahora.
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> ); };