获取组件 propTypes 作为字符串

debugcn 发表于 Dev

宝子豪

我想做一个包装器组件，它会自动将其子级的 proptypes 显示为 string。

例子

例如，我的组件可能是：

export class abc extends Component {
    static propTypes = {
        disabled: PropTypes.bool,
        text: PropTypes.oneOf(['a','b'])
    }
}

包装器将接收组件：

<Wrapper>
    <abc />
</Wrapper>

并输出如下所示的 HTML：

<pre>
    disabled: PropTypes.bool
    text: PropTypes.oneOf(['a', 'b'])
</pre>

我试过的

我曾尝试直接从实际的孩子中提取道具，最终得到了一个如下所示的包装器组件：

const wrapper = props => (<pre>
  {Object.entries(props.children.type.propTypes).map((entry) => (
    <div key={entry[0]}>{entry[0]}: {getPropTypeFromFunction(entry[1])}<br/></div>
  ))}
</pre>)

其中getPropTypeFromFunction的方法是：

const getPropTypeFromFunction = func => {
  for (const k in PropTypes) {
    switch (func) {
      case PropTypes[k]:
        return k
      case PropTypes[k].isRequired:
        return `${k}.isRequired`
      default:
        break;
    }
  }
  return "Unknown PropType"
}

然而，当我们获得非原始（？）属性PropTypes.onOf(['a', 'b'])类型时，这不起作用（例如。另外，必须以这种方式处理看似如此简单的事情感觉有点麻烦。

是否有某种优雅的解决方案（理想情况下没有任何外部库？）

宝子豪

最终使用react-docgen，它在内部使用重铸。这是通过将整个源文件作为字符串解析为抽象语法树 (AST) 来工作的，然后用于生成文档。有一些库使用它来实现文档，例如storybook.js和他们的info add-on，我最终使用了它们。