javascript - 在React组件的render()中查找特定类型的子级

我正在使用Draft.js，需要递归到props.children中以找到类型为DraftEditorBlock的组件。

由于某种原因，这似乎并没有奏效：

import React from 'react';
import { DraftEditorBlock } from 'draft-js';
...
export default class MyBlockRenderer extends React.Component {
  ...
  render() {
    const { children } = this.props;
    const firstChild = React.Children.toArray(children)[0];
    if (firstChild instanceof DraftEditorBlock) {
      ...
    }
    ...
  }
}

使用instanceof的行会导致此错误：

TypeError: Right-hand side of 'instanceof' is not an object

我究竟做错了什么？

最佳答案

请自上而下阅读draftjs源代码中的render()方法。在DraftEditorBlock和DraftEditor之间仍然有许多级别。

我建议您缓存所有已创建/挂载的DraftEditorBlock，而不要通过以下方式在render()中找到它们：


使组件继承DraftEditorBlock或具有单个<DraftEditorBlock ... />子代的新组件。
使用text将blockRendererFn块类型映射到您的组件。


应该管用。