实施例

Question

我想创建一个包装器组件，自动将其子类的proptypes显示为字符串。

实施例

例如，我的组件可能是：

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（例如PropTypes.onOf(['a', 'b'])时，这不起作用。而且这种方式处理看似简单的事情也感觉有些麻烦。

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

Answer 1

最终使用react-docgen，后者内部使用recast。这是通过将整个源文件作为字符串解析为Abstract Syntax Tree (AST)来工作的，然后将其用于生成文档。有一些库使用它来实现文档，例如storybook.js及其info add-on，我最终使用它们。

将组件propTypes作为字符串

实施例

我尝试了什么

1 个答案: