检查'logo'的渲染方法答案

【问题标题】：Check the render method of 'logo'检查'logo'的渲染方法
【发布时间】：2021-07-12 05:27:57
【问题描述】：

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

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;

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

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

检查Logo的渲染方法。 ▼ 扩展了 30 个堆栈帧。 createFiberFromTypeAndProps

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

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

【问题讨论】：

如果你的 const Logo 只是一个单一的 img 元素，只需在你试图调用这个 Logo 组件的地方替换它。您也可以尝试在您的其他组件中调用它作为。 {商标}。或者删除箭头函数：const Logo = 。然后在其他组件中 {Logo} 听起来它也可能是您构建中缺少的加载程序。我会扩展你的 webpack 或 CRA 打包器来为 png 文件添加一个加载器。

标签： javascript html reactjs render

【解决方案1】：

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

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

【讨论】：

您是如何理解Img 是否为命名导出的？
简单，查看文档react-image