storybook 如果在子组件中声明了displayName,则子组件的文档不会显示,

pepwfjgg  于 4个月前  发布在  其他
关注(0)|答案(2)|浏览(39)

描述bug

在子组件中没有找到输入

重现方法

https://github.com/RodrigoTomeES/storybook-no-inputs-subcomponents

系统信息

System:
    OS: macOS 12.2.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 17.3.1 - ~/.nvm/versions/node/v17.3.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v17.3.1/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v17.3.1/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Firefox: 97.0.1
    Safari: 15.3

附加上下文

我们创建了一个使用子模块的组件,并希望在Storybook中查看这些属性。我成功地在JavaScript中实现了这一点,但在Typescript中没有实现。有人知道这个问题的原因吗?谢谢!
主组件

子组件,它应该显示className属性

ergxz8rk

ergxz8rk1#

你好,

关于这个问题,我有一个更新。如果你在子组件文件中更改了子组件的名称,那么文档将无法正常工作,但是如果在父组件的索引中更改它,就可以正常工作。

LineTable: 这个可以实现文档无法正常工作

export cont LineTable = () => <div>Do Something</div>;

LineTable.displayName = 'Table.Line';

表格索引:如果你在这里放置displayName,文档就可以正常工作

import { Table } from './Table';
import { LineTable } from './LineTable';

export type TypeTable = typeof Table & {
  Line: typeof LineTable;
};

(Table as TypeTable).Line = LineTable;

LineTable.displayName = 'Table.Line';

export default Table as TypeTable;
eyh26e7m

eyh26e7m2#

我使用的解决方法:

export const LineTable = () => <div>Do Something</div>;

{
  LineTable.displayName = 'Table.Line';
}

相关问题