如何解决Storybook MDX预览中渲染useRef版Hook示例组件的报错问题？

问题根因 #

这个警告和MyExample组件的内部逻辑完全无关——毕竟在普通浏览器环境下，contentRef正常绑定到内部<div>的运行表现完全符合预期。
警告的触发逻辑是：Storybook 的InlineStory组件在MDX环境下渲染时，会自动对作为顶层子元素的React组件执行克隆操作，并为其注入内部使用的ref（用于实现文档面板联动高亮、焦点追踪等内置能力）。当它识别到顶层子元素是普通函数组件MyExample时，就会触发React内置的「函数组件无法接收ref」警告，和自定义Hook的ref传递逻辑没有任何关联。

无需拆分文件的内联解决方法 #

两种方案都可以直接在当前MDX文档内实现，不需要将示例组件单独迁移到独立文件：

• 改用Story的render prop传递渲染逻辑
  不要直接将<MyExample />作为Story的子元素，通过官方支持的render属性传入返回组件的函数即可：

  <Preview>
      <Story 
          name="Example" 
          render={() => <MyExample />}
      />
  </Preview>
  

  该写法下，Storybook的内部渲染逻辑会将你的组件挂载到它自有的原生DOM容器中，不会尝试向自定义函数组件注入ref，从根源上避开警告触发条件。
• 为组件添加无布局影响的原生DOM容器
  如果不想调整Story的传参写法，仅需在现有JSX结构中给<MyExample />外层包一层带display: contents属性的原生div：

  <Preview>
      <Story name="Example">
          <div style={{ display: 'contents' }}>
              <MyExample />
          </div>
      </Story>
  </Preview>
  

  这个原生div本身不会生成独立的盒模型（视觉效果和无包裹层完全一致），同时作为原生HTML元素可以正常接收Storybook注入的ref，不会触发函数组件的ref警告。

内容的提问来源于stack exchange，提问作者James Paterson