与 reactjs、material ui 一起使用时如何修复未知的 prop zdepth 警告？答案

【问题标题】：how to fix unknown prop zdepth warning when using with reactjs , material ui?与 reactjs、material ui 一起使用时如何修复未知的 prop zdepth 警告？
【发布时间】：2016-11-04 22:55:42
【问题描述】：

warning.js:36Warning：标签上的未知道具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>
    ...

【问题讨论】：

给我们看一些代码怎么样？
从'react'导入反应，{组件}；从 'material-ui/Divider' 导入 Divider；从“material-ui/Paper”导入纸张；从 'material-ui/styles/getMuiTheme' 导入 getMuiTheme；从“material-ui/styles/MuiThemeProvider”导入 MuiThemeProvider；从 'material-ui/styles/baseThemes/lightBaseTheme' 导入 baseTheme；导出默认类就业内容扩展组件 { getChildContext() { return { muiTheme: getMuiTheme(baseTheme) }; } render() { return (
素材ui版本？
素材ui版本为0.16.0

标签： reactjs material-ui

【解决方案1】：

您看到此警告是因为您正在使用带有 lowercase 的 Paper 组件，并且 React 将这些小写标签视为内置组件。

您只需导入并使用Paper，以大写字母开头。

当一个元素类型以小写字母开头时，它指的是一个内置组件，如 or 并导致字符串 'div' 或“跨度”传递给 React.createElement。以 a 开头的类型大写字母，如编译为 React.createElement(Foo) 和对应于您的 JavaScript 文件中定义或导入的组件。

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

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

还有一个问题打开https://github.com/facebook/react/issues/7848 将其添加到unknown-props 警告页面。

【讨论】：