React JS Storybook中组件props解构传参失效问题求助

你代码里存在三处明确的语法错误，修正后即可正常运行：

• 组件定义的类型标注括号不匹配，多写了一个多余的右括号
  错误代码：

  export function WrapTitle ({title,children}) : TitleProps & ChildrenProps){
  

  修正后：

  export function WrapTitle ({title,children}: TitleProps & ChildrenProps) {
  

• 组件内部渲染逻辑存在两处错误：解构的props是title，渲染时拼写为titles；h1标签缺少左尖括号
  错误代码：

  return (<>h1>{titles}</h1> {children}</>)
  

  修正后：

  return (<><h1>{title}</h1> {children}</>)
  

• 组件调用时大小写不匹配：定义的组件名为WrapTitle，调用时写为Wraptitle，React组件名大小写敏感，大小写不匹配会导致props传递异常。你直接传参能正常运行大概率是实际写代码时直接调用的大小写是正确的，写示例时出现手误。

如果修正以上问题后仍无法正常运行，可额外检查Storybook中组件导入路径是否正确、args是否绑定到对应故事对象上。

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