代码之家  ›  专栏  ›  技术社区  ›  garritfra

npm反应模块错误

  •  -1
  • garritfra  · 技术社区  · 7 年前

    我目前正在尝试构建一个react组件库。

    我有 this 项目已设置,但当我尝试将其包含在演示项目中时,出现以下错误:

    不变冲突

    元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记了从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。

    检查“App”的渲染方法。

    我的索引。js公司:

    import Button from "./components/Button";
    
    export default {
      Button
    };
    

    我的示例组件

    import styled from 'styled-components';
    const Button = styled.button`
      background: #1FB6FF;
      border: none;
      border-radius: 2px;
      color: #FFFFFF;
      cursor: pointer;
      display: inline-block;
      font-size: 16px;
      line-height: 40px;
      font-weight: 200;
      margin: 8px 0;
      outline: none;
      padding: 0 12px;
      text-transform: uppercase;
      transition: all 300ms ease;
      &:hover {
        background: #009EEB;
      }
    `;
    export default Button;
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    

    有人能说出问题出在哪里吗?

    提前感谢!

    2 回复  |  直到 5 年前
        1
  •  0
  •   Colin Ricardo    7 年前

    我想 export default { Button } 应为: export default Button

        2
  •  0
  •   Gautam Naik    7 年前

    试试这个,在你的索引中。js文件,而不是

    export * from "./components/Button";
    

    执行此操作

    export Button from "./components/Button";
    

    export default { Button }

    应为:

    export default Button.

    有关更多信息,请参阅 ES6 export * from import ?