MDX内部的呼叫挂钩

Question

我正在记录我使用MDX创建的钩子，并且我想创建一个按钮-单击后将触发该钩子。

基本上，我想要的是这个

import { useMyHook } from './myHook';

# My hook
My hook is great. Check it out by clicking below:

{() => {
  const { triggerSomeAction } = useMyHook();
  return <button onClick={triggerSomeAction}>Click to demo</button>;
}}

Great right? It triggers some action when you click it!

基本上，我想内联创建一个函数组件，然后调用它。实现此目标的最佳方法是什么？

我可以将表达式包装在React.Fragment中，然后手动对其调用React.createElement，但这似乎是一个粗略的实现。

编辑：我可以通过创建包装器组件InlineComponent并在其中包装代码来进一步改善它：

import { useMyHook } from './myHook';
import InlineComponent from './InlineComponent';

# My hook
My hook is great. Check it out by clicking below:

<InlineComponent>
  {() => {
    const { triggerSomeAction } = useMyHook();
    return <button onClick={triggerSomeAction}>Click to demo</button>;
  }}
</InlineComponent>

Great right? It triggers some action when you click it!

实施将简单地

const InlineComponent = ({ children }) => React.createElement(children);

但是，对于似乎可以某种方式内置到MDX框架中的某些东西，这似乎是一种怪异的解决方法。