Fluent UI React TextField自定义错误消息引发控制台报错的解决咨询

报错原因 #

你猜的完全正确，问题根源是HTML结构合法性冲突：Fluent UI的TextField组件默认会把errorMessage的内容包裹在<p>标签里，而Stack组件渲染后会生成<div>块级元素。根据HTML规范，<p>标签不能嵌套块级元素（比如div），浏览器检测到这种非法嵌套时就会抛出警告。

解决方法 #

最直接的方案是绕过TextField默认的<p>容器，自定义错误消息的渲染逻辑，用renderErrorMessage属性替代errorMessage：

<TextField
  value="ABC"
  onChange={(_, newValue: string | undefined) => onValueChange(newValue)}
  // 用renderErrorMessage完全接管错误消息渲染，不再用默认p标签包裹
  renderErrorMessage={() => item.validationError || null}
/>

这个属性会直接把你传入的JSX（即Stack组件）渲染到错误消息区域，不会额外添加<p>容器，从根源上避免了非法嵌套问题。

如果需要保留TextField错误消息的默认样式，可以给自定义的Stack添加官方类名，确保样式和原生错误消息一致：

<Stack 
  horizontal 
  horizontalAlign="start"
  className="ms-TextField-errorMessage"
>
  <Stack.Item> {/* 你的内容 */} </Stack.Item>
  <Stack.Item> {/* 你的内容 */} </Stack.Item>
</Stack>

内容的提问来源于stack exchange，提问作者coolest-duck