Question

我有一个名为LimitedTextField的组件，正在尝试使用Storybook进行测试。

在没有模板语法的情况下进行测试绝对可以：

export default {
    title: 'LimitedTextField',
    component: LimitedTextField,
} as Meta;

export const LimitedTextFieldStory = () => <LimitedTextField maxCount={10} />;

但是使用模板语法进行测试会产生错误：

const Template: Story<LimitedTextFieldProps> = (args) => (
    <LimitedTextField {...args} />
);

export const LimitedTextFieldStory = Template.bind({});
LimitedTextFieldStory.args = {
    maxCount: 30,
};

这是运行时错误：

TypeError: renderContainer is not a function
    at http://localhost:6006/main.791ec87e4fcdc8669a84.bundle.js:1962:21
    at renderWithHooks (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:2546:153)
    at updateForwardRef (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:2700:154)
    at beginWork (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:3049:1668)
    at HTMLUnknownElement.callCallback (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:70:102)
    at Object.invokeGuardedCallbackDev (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:90:45)
    at invokeGuardedCallback (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:105:126)
    at beginWork$1 (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:3934:1)
    at performUnitOfWork (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:3734:177)
    at workLoopSync (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:3730:45)

作为参考，以下是该组件的相关代码（完整代码here）：

export interface LimitedTextFieldProps {
  maxCount: number;
  ref ? : React.Ref < any > ;
  renderContainer ? : (props: InputInjectedProps) => JSX.Element;
  ...
}

export const LimitedTextField = React.forwardRef(
  ({
    maxCount,
    renderContainer = (props) => <input {...props} />,
  }: LimitedTextFieldProps,
  ref) => {
    ...
  }
);

完整的故事书的故事是here。

我该如何解决？

故事书的模板语法给出TypeError

0 个答案: