reactjs - 故事书 MDX : Dynamic Meta Title

Question

如何设置动态 title故事书上的属性(property)Meta Markdown Extended 中的组件 *.stories.mdx文件？

import { Meta } from '@storybook/addon-docs/blocks';

// displays title as 'undefined' in sidebar nav
<Meta title={conditionalValue ? 'foo' : 'bar'} />

我也试过包装 Meta在高阶组件中，触发错误: Unexpected default export without title

import { Meta } from '@storybook/addon-docs/blocks';

export const MetaCustom = (props) => {
  const title = conditionalValue ? props.foo : props.bar;
  return <Meta title={title} />;
};

// mdx stories file
<MetaCustom foo="foo" bar="bar" />

Answer 1

我尝试创建一个 util 函数并导入到 mdx 中，看起来它正在工作。

实用程序.js

export function generateTitle (condition) {
   return condition ? 'foo' : 'bar'
}

Component.stories.mdx

import { generateTitle } from './utils.js';

    <Meta
      title={generateTitle(true)}
    />

希望有帮助!