javascript - 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>

控制台日志 this.props.children

我做错了什么？什么都没有显示，检查元素会发现一个空的 <div>渲染时里面什么都没有...

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

Answer 1

这是一个愚蠢的。我的错误是使用 this当我应该使用 head 时或 body或 footer当提到 child 时。

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