Question

我是前端开发的新手，所以我认为这个问题很基础，但是我自己却找不到答案。我想使用Shopify应用程序桥，这意味着使用Polaris React组件为Shopify应用程序创建UI。我是JS，React和npm的新手，但是跟随一些基本教程开始。当我到达https://polaris.shopify.com/components/get-started#navigation上的“首先，将组件导入到您的项目：”中时，我迷失了。我猜想导入行应该是我的js文件中的第一行，但是当我添加导入行时，我的基本示例停止了工作。我尝试使用以下命令安装Polaris： npm install @ shopify / polaris --save

添加导入行之前的文件：

我的HTML文件：

<html>
<head>
    <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/3.4.0/polaris.min.css" />
</head>
<body>
<div id="root"></div>

<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script  src="scripts/test.js"></script>
</body>
</html>

我的test.js文件：

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

我的package.json文件：

{
  "name": "somename",
  "version": "1.0.0",
  "dependencies": {
    "@shopify/polaris": "^3.4.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

当我添加“从'@ shopify / polaris'导入{AppProvider，Button}时;“到js文件的顶部，该页面无法呈现，但我不知道为什么。

要导入组件，我缺少什么？

谢谢， -路易斯

Answer 1

您可以这样导入它：

import {AppProvider, Page, Card, Button} from '@shopify/polaris';
import '@shopify/polaris/styles.css';

并像这样使用它

<AppProvider>
    <Page title="Example app">
      <Card sectioned>
        <Button onClick={() => alert('Button clicked!')}>Example button</Button>
      </Card>
    </Page>
  </AppProvider>

这是一个实时示例：https://stackblitz.com/edit/react-eaexfs

此处有更多信息：https://www.npmjs.com/package/@shopify/polaris

如何导入Polaris React组件？

1 个答案: