我正在编写一个带有子组件的组件,当我调用 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
最佳答案
这是一个愚蠢的。我的错误是使用 this
当我应该使用 head
时或 body
或 footer
当提到 child 时。
改为head.props.children
.抱歉,那是我的错误。
关于javascript - this.props.children 不呈现尽管存在,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51617174/