React如何引入Polaris（已解决）

今天在实战中遇到的难点，怎么把Polaris框架引入到React中，踩坑多次，终于成功，记录一下。

安装Polaris

npm install @shopify/polaris --save

在创建好的React项目中安装此命令，第一次有如下报错

考虑是当前react版本过高，于是我将当前的版本两次分别降级为16.14.0和17.0.0，依然还是有同上报错：

此时可以看出，并不是react的版本问题，因此我多方查阅资料，终于找到是因为我的npm版本过高，将npm降级为12.17.0版本之后成功引入Polaris@9.7.0

代码编译

此时我在index.tsx文件中写入如下代码引入Polaris

import React from "react";

import ReactDOM from "react-dom";

import {AppProvider} from "@shopify/polaris";

import en from '@shopify/polaris/locales/en.json';




import App from "./App";

import "@shopify/polaris/build/esm/styles.css";



ReactDOM.render(<AppProvider i18n={en}><App /></AppProvider>, document.getElementById("root"));

编译后遇如下报错

由图可知是我的react版本过高，因此降级为17+，

npm install --save react@17.0.0

编译成功

撰写第一个组件

在App.tsx中随便写入组件代码(可全文复制)

import React, {useCallback, useState} from 'react';
import {Card, Tabs} from '@shopify/polaris';

export default function TabsExample() {
  const [selected, setSelected] = useState(0);

  const handleTabChange = useCallback(
    (selectedTabIndex:number) => setSelected(selectedTabIndex),
    [],
  );

  const tabs = [
    {
      id: 'all-customers-1',
      content: 'All',
      accessibilityLabel: 'All customers',
      panelID: 'all-customers-content-1',
    },
    {
      id: 'accepts-marketing-1',
      content: 'Accepts marketing',
      panelID: 'accepts-marketing-content-1',
    },
    {
      id: 'repeat-customers-1',
      content: 'Repeat customers',
      panelID: 'repeat-customers-content-1',
    },
    {
      id: 'prospects-1',
      content: 'Prospects',
      panelID: 'prospects-content-1',
    },
  ];

  return (
    <Card>
      <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange}>
        <Card.Section title={tabs[selected].content}>
          <p>Tab {selected} selected</p>
        </Card.Section>
      </Tabs>
    </Card>
  );
}

页面成功显示