TypeError: Cannot read property 'upgradeElements' of undefined and issue 2 is TypeError: Cannot read property 'downgradeElements' of undefined

Question

我已经成功地将 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 库中的布局、header、导航和内容。 为了更清楚地说明问题，当我评论 react-mdl 库并停止使用其组件时，错误消失了。

Answer 1

你能详细描述一下这个问题吗？这个问题可能是由很多reasons.Besides引起的，react-mdl库现在已经被弃用了，你可以试试Material设计组件。

Answer 2

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

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