reactjs FluentUI React中控制台中的TextField错误

kknvjkwl  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(123)

我在React中使用Fluent UI提供的TextField组件,其中我正在呈现自定义验证错误消息(JSX.Element)。

<TextField
    value={"ABC"}
    onChange={(_, newValue: string | undefined) =>                   
             onValueChange(newValue)}
    errorMessage={item.validationError|| undefined}
 />;

验证错误(在上面的代码中称为item.validationError)是一个JSX元素,它使用了Fluent UI提供的Stack组件。

<Stack horizontal horizontalAlign="start">
   <Stack.Item> {} </Stack.Item>
   <Stack.Item> {} </Stack.Item>
</Stack>

由于某种原因,每当出现验证错误时,控制台中就会出现此错误-x1c 0d1x
它不会以任何方式影响功能,但如何删除此错误以及为什么会出现此错误?我怀疑这是因为Stack在TextField组件内部使用,Stack内部使用div,而TextField使用p标记。

mwkjh3gx

mwkjh3gx1#

该警告由浏览器打印,用于检查某些类型的HTML嵌套规则。例如,块元素不应显示为内联元素的子元素。
p应该只包含行内元素。但是div是块元素。
您的Stack组件使用了div元素。这就是您看到警告的原因。
内联元素和块元素有不同的属性,其中最重要的一个属性是块元素总是使用100%的宽度。
我不知道你正在使用的UI库,但也许你可以为堆栈使用不同的标记。
另请参阅:https://stackoverflow.com/a/41928635

相关问题