Carbon Design Systems React UI Shell 组件无法正常工作

Question

我正在尝试使用Carbon Design的UI Shell组件。我关注此博客来安装所有库、依赖项等。

下面是我的代码：

import {UIShell} from 'carbon-components-react';
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
    <UIShell>UIShell Placeholder</UIShell>
  </header>
 </div>
 );
 }
 export default App;

当我运行此代码时，我得到：

 "Failed to compile: ./src/App.js Attempted import error: 'UIShell' is not exported from 'carbon-components-react'."

根据存储库，UIShell是碳成分反应的组成部分。 为什么我会收到此错误？

Answer 1

如果你查看./node_modules/carbon-components-react/lib/index.js，你会发现，虽然UIShell是在.../lib/components/中定义的，但它没有被导出。

所以问题实际上是...当 UIShell 组件库未导出时，我们如何从 carbon-components-react 组件库中访问它？

我发现可以显式导入UIShell组件库：

import {...} from 'carbon-components-react/es/components/UIShell'

或者，如果您不使用ESM，我认为您可以通过以下方式require组件：

require('carbon-components-react/lib/components/UIShell')