检查 'logo' 的渲染方法

Question

我在提到 logo 的文件中有以下代码：

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;

启动 yarn 后，出现以下错误：

错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

Check the render method of Logo. ▼ 30 stack frames were expanded. createFiberFromTypeAndProps

我参考了以下链接，但无法将它们与我的案例联系起来。

Check the render method of `component`

我不知道是否应该去更改文件夹或代码中的某些内容。如果您需要更多信息，请与我们联系。提前致谢！

Answer 1

Img 是命名导出，但您将其导入为默认导入。

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

检查 'logo' 的渲染方法

Check the render method of 'logo'

html

javascript

render

reactjs