reactjs - prop `children` 在 `AppBar` 中被标记为 required，但其值为 `undefined`

Question

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

index.js:2178 警告:失败的 prop 类型:prop 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 组件提供了所需的子验证 Prop 。如果你查看 React dev-tool Inspector，你会发现 AppBar 在 Props 中没有子项:

从逻辑上讲，您需要将子节点 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>
    );
  }
}

进入 react 检查器，你可以看到新的子 Prop 。