Question

我已经成功地在React项目中集成了react，但是当我调用“ 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库并停止使用其组件时，错误消失了。

Answer 1

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

Answer 2

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

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

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

2 个答案: