检查“徽标”的渲染方法

Question

我在文件中有以下代码，其中提到了徽标：

import RaisedButton from 'material-ui/RaisedButton';
import Paper from 'material-ui/Paper';
import Img from 'react-image';
import React from 'react';
import logo from '../logo.png';
const paperStyle = {
  padding: 20,
  height: 6000,
  margin: 20,
  alignItems: 'center',
  textAlign: 'center',
  backgroundColor: '#ced7e5',
};

const Logo = () => <Img src={logo} />;

const Introduction = props => (
  <section id="home">
    <Paper style={paperStyle} zDepth={3}>
      <Logo />
      <h1 className="title">Welcome to this program</h1>
      <p className="intro">
        This program is to Render the challenge
      </p>
      <RaisedButton data-test-id="render-challenge" label="Render the Challenge" primary onClick={props.showChallenge} />
      <p>You might have noticed that clicking that button starts a long scroll. </p>
      <span style={{ fontSize: 60 }} role="img" aria-label="down-emoj" >⬇�</span>
    </Paper>
  </section>
);

export default Introduction;

启动纱线后，我得到以下错误：

错误:元素类型无效:需要一个字符串(用于内置组件)或一个类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Logo的呈现方法。扩大了30个堆栈框架。createFiberFromTypeAndProps

我已经提到了下面的链接，但无法将它们与我的案例联系起来。

• Check the render method of 'SeekBar'
• Check the render method of component
• Mapview - Check the render method of 'App'

我不明白我是否应该去修改文件夹或代码中的某些内容。如果你需要更多的信息，请告诉我。提前谢谢！

Answer 1

Img是一个命名的导出，但您将它作为默认导入导入。

将import Img from 'react-image';更改为import { Img } from 'react-image';