Question

warning.js：36警告：标记上的未知道具zDepth。从元素中删除此道具。

我想渲染一个。但它显示出上述错误。有人可以帮忙吗？

import React, { Component } from 'react'; 
import Divider from 'material-ui/Divider'; 
import paper from 'material-ui/Paper'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';

export default class EmploymentContent extends Component { 
  getChildContext() { 
    return { muiTheme: getMuiTheme(baseTheme) }; 
  } 

  render() { 
    return ( 
      <paper zDepth={4}> <ul className="scroll"> </paper>
    ...

Answer 1

您看到此警告是因为您使用带有小写的Paper组件，而React将这些小写标记视为内置组件。

您需要做的就是导入并将其用作Paper，从大写字母开始。

当元素类型以小写字母开头时，它引用a   内置组件喜欢或者导致字符串'div'   或者'span'传递给React.createElement。以a开头的类型   大写字母就像编译到React.createElement（Foo）和   对应于JavaScript文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果你有   以小写字母开头的组件，将其分配给a   在JSX中使用它之前的大写变量。

你可以在这里看到它 https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

在unknown-props警告页面上添加该问题还有一个问题https://github.com/facebook/react/issues/7848。

如何使用reactjs，材料ui修复未知的prop zdepth警告？

1 个答案: