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