尽管存在，this.props.children仍未呈现

Question

我正在编写带有子组件的组件，并且当我在每个子组件中调用this.props.children时，都不会呈现JSX。如果我console.log，可以验证它们确实存在并且绝对正确。

class Modal extends Component {
  ...
  renderHead() {
    // This checks whether this sub-component was rendered
    const head = findByType(this.props.children, Head);
    if (!head) {
      return null;
    }

    return <div>{this.props.children}</div>;
  }

完整代码：source

实例化子组件：

const Head = () => null;
...
Modal.Head = Head;

调用此组件的外部代码：

<Modal>
  <Modal.Head>
    Hi
  </Modal.Head>
</Modal>

Console.log this.props.children

我在做什么错？什么都没显示，检查元素是否显示了一个空的<div>，其中没有任何内容...

编辑-链接的完整模态组件代码：source

Answer 1

这是愚蠢的。我的错误是使用this时应该在引用孩子时使用head或body或footer。

已更改为head.props.children。抱歉，那是我的错误。