在React組件的render（）中查找特定類型的子級

Question

我正在使用Draft.js，需要遞歸到props.children以查找DraftEditorBlock類型的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

請自上而下閱讀draftjs源代碼中的render()方法。 DraftEditorBlock和DraftEditor之間仍然有許多級別。

我建議您緩存所有已創建/掛載的DraftEditorBlock而不是通過以下方法在render()找到它們：

1. 使組件繼承DraftEditorBlock或具有單個<DraftEditorBlock ... />子代的新組件。
2. 使用blockRendererFn將text塊類型映射到您的組件。

應該管用。