如何导入Polaris React组件？
我是一个全新的前端开发人员，所以我认为这个问题是非常基本的，但我自己也找不到答案。我想使用Shopify App Bridge，这意味着使用Polaris React组件为Shopify App创建UI。我是JS，React和npm的新手，但我遵循了一些基本的教程来开始。当我在https://polaris.shopify.com/components/get-started#navigation上看到“首先，将组件导入到您的项目中：”的说明时，我迷失了方向。我猜import行应该是我的js文件中的第一行，但是当我添加import行时，我的基本示例停止工作。我尝试使用以下命令安装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"
}
}当我将"import {AppProvider，Button} from '@shopify/polaris';“添加到js文件的顶部时，页面无法呈现，但我找不出原因。
为了能够导入组件，我遗漏了什么？
谢谢，-Louise
回答 1
Stack Overflow用户
发布于 2019-01-16 21:47:33
您可以像这样导入它：
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://stackoverflow.com/questions/54218245
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号