如果元素是从无状态功能组件创建的,则告知

Question

我是React Flip Move的所有者,React Flip Move是一个小型库,可帮助重新排序DOM节点时进行动画转换.

它的工作原理是使用refs; 我克隆了提供的children并附加了一个ref函数,该函数将授予我对底层节点的访问权限,并且我根据需要使用该引用进行必要的动画处理.

但是,无状态功能组件不支持refs.当它通过SFC时,它会抛出异常.

当前的错误消息非常无用,我想提供更明确的警告.问题是,我不知道如何判断是否从SFC创建了React元素.检查props.children,他们看起来几乎相同.

我当然可以通过在try/catch中包装第一个调用来解决这个问题,但是我希望比那更明确(同样,我也不想等到第一次动画尝试才触发自定义错误消息).

Answer 1

我不知道这是否有帮助，但您对此有何看法：

class StatefulComponent extends React.Component {...}

console.log(typeof StatefulComponent.prototype.isReactComponent); // logs 'object'

const StatelessComponent = () => {...}

console.log(typeof StatelessComponent.prototype.isReactComponent); // logs 'undefined'

不过，我会尽快尝试 React Flip Move。干得好！

编辑：

因此，如果您想知道基础组件的子组件是否是 React 组件：

// logs 'object' if it's a React Component otherwise logs 'undefined'
console.log(typeof this.props.children.type.prototype.isReactComponent);