Question

我正在编写一个带有renderer属性的React组件。通常，这是一个接受参数对象并返回另一个React组件的函数。但是，我希望我的组件的用户能够传入React组件类。然后我会在函数内部包装该类：

class MyComponent extends React.Component {
    render() {
        const { renderer } = this.props;

        const renderFn = (renderer.isAComponentClass())
            ? (props => <renderer {...props} />)
            : renderer;

        return <div>{ renderFn(someArgs) }</div>;
    }
}

当然，在JavaScript中，类也是一个函数。如何检查renderer是否为班级？我正在使用Babel 6。

我知道我可以简单地返回<renderer {...someArgs} />。如果我可以避免它，我宁愿不这样做，因为这会不必要地使组件树膨胀。

Answer 1

可以使用正则表达式检测本机类 - 只要它们不实现toString方法，将其表示形式更改为字符串。

由于类与转换代码中的函数不同，因此无法检测函数是否为类。这是一个很好的理由，甚至不试图以编程方式区分它们。

可以使用

检查React.Component是否是函数/类的祖先

renderer.prototype instanceof React.Component

由于这会带来不必要的限制，因此更好的选择是对其进行测试，例如

renderer.prototype && ['render', 'setState', ...]
  .map(methodName => typeof renderer.prototype[methodName])
  .every(methodType => methodType === 'function')

但是，这些检查都不准确。在某些情况下，prototype属性可能会混乱，例如当一个班级被装饰。确实知道类是组件的唯一方法是首先实例化它。

如果渲染器函数和组件永远不会混淆，API会更清晰，例如单独的renderer和rendererComponent属性。

如何判断函数是否为类？

1 个答案: