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

Question

我正在使用 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

我做错了什么？

Answer 1

阅读render() Draftjs 源代码中的方法自上而下。 DraftEditorBlock之间还有很多级别和DraftEditor 。

我建议您缓存所有创建/安装的DraftEditorBlock除了在 render() 中找到它们之外作者:

1. 使组件继承DraftEditorBlock ，或具有单个 <DraftEditorBlock ... /> 的新组件 child 。
2. 绘制text使用 blockRendererFn 为您的组件添加 block 类型.

应该可以。