支持`children`在`AppBar`中被标记为必需，但它的值是'undefined`

Question

我想使用原生Material-ui组件，但在浏览器中出现此错误：

index.js：2178警告：道具类型失败：道具children在AppBar标记为必需，但其值为undefined。

我的组件是：

import React from 'react';
import AppBar from 'material-ui/AppBar';

/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const Header = () => (
  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
);

export default Header;

帮助我理解为什么？

Answer 1

我和^1.0.0-beta.38有同样的问题，我找到了解决方法。这是由于与新库api不兼容造成的。根据问题https://github.com/mui-org/material-ui/issues/6446，图书馆现在正在积极改造，但文档还没有更新。看来，新版本库为AppBar组件提供了必需的子级验证道具。如果你看看反应开发工具检查员，你会看到AppBar在道具上没有孩子：

逻辑上，您需要将子节点ToolBar和Typography子节点放入AppBar中，如下所示：

import React, { Component } from 'react'
import { AppBar } from 'material-ui'

class App extends Component {
  render() {
    return(
      <AppBar>
        <Toolbar>
          <Typography variant="title" color="inherit">
            Title
          </Typography>
        </Toolbar> 
      </AppBar>
    );
  }
}

进入反应检查员，你可以看到新的儿童道具。

Answer 2

孩子是你的主要成分所包含的组成部分，所以它应该是：

<AppBar
  title="Title"
  iconClassNameRight="muidocs-icon-navigation-expand-more"
>
  <ChildrenComponent />
</AppBar>

如果您不需要任何孩子，则不必按要求提供。

Answer 3

当它第一次运行时，因为道具中没有值，所以它会显示为$event，你可以避免这个错误设置undefined并给它一个属性{{1 }}：

defaultProps

注意：如果您想允许null使用isNotNull，如果您想允许import PropTypes from "prop-types"; ComponentName.defaultProps = { input: PropTypes.isNotNull // you can amend this accordingly } ，请使用isDefined之类的（您可以根据需要修改） ：

undefined

您可以使用propTypes On React Documentation

了解有关Typechecking的更多信息

Answer 4

我在收到以下错误时发现了这个问题：

<块引用>

警告：失败的道具类型：道具children被标记为必需 在 ForwardRef(Container) 中，但其值为 undefined。

问题是我没有意识到我已经愚蠢地从 <Container> 元素中删除了所有子元素。我没有立即理解错误消息，并且错误没有明确指向项目中的文件，因此将这个答案留在这里以防其他人犯同样的愚蠢错误。

Answer 5

我在 Gatsby 中使用主题包装器时出现此错误。该错误只存在于开发模式，一旦构建并提供它就会消失。

Answer 6

他们现在已经更新了文档（https://material-ui-next.com/）