TypeError：无法读取未定义的属性“upgradeElements”，问题 2 是 TypeError：无法读取未定义的属性“downgradeElements”答案

【问题标题】：TypeError: Cannot read property 'upgradeElements' of undefined and issue 2 is TypeError: Cannot read property 'downgradeElements' of undefinedTypeError：无法读取未定义的属性“upgradeElements”，问题 2 是 TypeError：无法读取未定义的属性“downgradeElements”
【发布时间】：2018-09-22 08:00:40
【问题描述】：

我已经成功地将 react 集成到 express 项目中，但是当我调用“react-mdl”库时，它显示 2 个错误

TypeError: Cannot read property 'upgradeElements' of undefined

TypeError: Cannot read property 'downgradeElements' of undefined

在我正在做的 app.js 文件中：

    import React, { Component } from 'react';
import './App.css';
import { Layout, Header, Navigation, Content } from 'react-mdl';
import Main from './components/main';
class App extends Component {
  render() {
    return (
      <div className="demo-big-content">
          <Layout>
              <Header>
                    <div className="container">
                        <div className="logo"><a href="/"><img src="https://s3.amazonaws.com/truebase/static/truebase_logo.png" /></a></div>
                        <Navigation>
                            <a href="/">About</a>
                            <a href="https://www.trueprotocol.com">Protocol</a>
                        </Navigation>
                        <div className="login_buttons">
                            <Navigation>
                                <a href="/login">Login</a>
                                <a href="/signup" className="signs">Sign Up</a>
                            </Navigation>
                        </div>
                        <div className="right_search">
                            <form><i className="fa fa-search"></i>
                            <input type="text" className="key_input" placeholder="Search for Companies or People" />
                                <div className="sarch_rslt">
                                    <ul>
                                        <li>
                                            <img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&h=350" />
                                            <h5>Pretend Co</h5>
                                            <p>San Francisco, Ca, USA</p>
                                        </li>
                                        <li>
                                            <img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&h=350" />
                                            <h5>Pretend Co</h5>
                                            <p>San Francisco, Ca, USA</p>
                                        </li>
                                        <li>
                                            <img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&h=350" />
                                            <h5>Pretend Co</h5>
                                            <p>San Francisco, Ca, USA</p>
                                        </li>
                                        <li>
                                            <img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&h=350" />
                                            <h5>Pretend Co</h5>
                                            <p>San Francisco, Ca, USA</p>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>

              </Header>
          </Layout>
      </div>
    );
  }
}

我正在使用 react-mdl 库中的布局、标题、导航和内容。为了更清楚地说明问题，当我评论 react-mdl 库并停止使用其组件时，错误消失了。

【问题讨论】：

标签： node.js reactjs react-native node-modules mern

【解决方案1】：

你能详细描述一下这个问题吗？这个问题可能是由多种原因引起的。此外，react-mdl 库现已弃用，您可以尝试使用 Material Design Components。

【讨论】：

您好，感谢您的贡献。为了您的清楚，我已经用代码编辑了我的问题，并详细描述了这个问题。如果您知道，请再次检查并告诉我如何解决它
将此添加到您的文件中“import 'react-mdl/extra/material.css'; import 'react-mdl/extra/material.js';”。我认为这会起作用。跨度>
我认为你应该阅读Github上关于react-mdl的描述。因为react-mdl中的Layout在react上不起作用，所以你必须添加这个。

【解决方案2】：

我在使用 react-mdl 时也遇到了这个问题。
在src/index.js 中添加以下行应该可以解决问题：

import 'react-mdl/extra/material.css';   
import 'react-mdl/extra/material.js';

【讨论】：