Question

我在最后一小时搜索了解决方案但没有任何帮助。我的导出和导入已正确定义。我还尝试用另一个组件替换Clock.js的全部内容，并且它有效。我只是疯了..

import React from 'react';

const pad = n => (n < 10 ? `0${n}` : n);
const format = t => `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`;

const Clock = ({ lastUpdate, light }) => (
  <div className={light ? 'light' : ''}>
    {format(new Date(lastUpdate))}
    <style jsx>{` 
        div {
          padding: 15px;
          display: inline-block;
          color: #82FA58;
          font: 50px menlo, monaco, monospace;
          background-color: #000;
        }

        .light {
          background-color: #999;
        }
      `}
    </style>
  </div>
);

export default Clock;

导入＆amp;拨打：

import Clock from '../components/Clock';
<Clock lastUpdate={lastUpdate} light={light} />

错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

时钟导入： https://pastebin.com/fWRCaYM5

Answer 1

您是否尝试过将Clock重命名为其他内容？某处可能存在某种冲突。

编辑---

您可以使用以下样式：

var style = {
    padding: "15px",
    display: "inline-block",
    color: "#82FA58",
    font: "50px menlo, monaco, monospace",
    backgroundColor: light? "#999" : "#000"
};

然后使用：

<div style={style}>

Answer 2

我通过删除样式化的jsx修复了这个问题。即使通过阅读NPM模块和babel配置的说明，我也没有让它工作。

Webpack正在使用HMR，因此如果不重新启动构建，错误就不会消失。

我现在正在使用内联样式。我想获得为React组件编写className样式的建议。任何人吗？

元素类型无效 - React.js（在网络上找不到解决方案）

2 个答案: