Shopify Polaris页面标签无法正常工作 - Rails和reactJS

Question

我正在尝试制作shopify应用程序，我想在带有极地和reactJS的轨道上使用ruby。当我尝试使用shopify网站上的Page组件时，屏幕上没有任何内容呈现。这是我正在谈论的一个例子。

这是我的index.jsx文件：

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import {AppProvider, Page, Card} from '@shopify/polaris'
import '@shopify/polaris/styles.css'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Page title="Jar Witock-Lid"> //Here is where I use the Page tag
        <p>Other content</p>
    </Page>,
    document.body.appendChild(document.createElement('div')),
  )
})

其他一切工作正常，因为当我将Page标签更改为像这样的div时：

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <div>
        <div>{"One"}</div>
        <div>{"Two"}</div>
        <div>{"Three"}</div>
    </div>,
    document.body.appendChild(document.createElement('div')),
  )
})

它会向页面呈现（“一”“两”“三”）。当我运行rails服务器并刷新屏幕时，不会显示任何错误或警告。我通过运行以下命令下载了polaris：yarn add @shopify/polaris。

任何帮助是极大的赞赏。我尝试在整个网络上查找，但我无法将各个部分放在一起。提前致谢！

Answer 1

我找到了解决方案。我唯一缺少的是将它全部包装在AppProvider标签中，如下所示：

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <AppProvider>
        <Page title="Jar Witock-Lid">
            <p>content</p>
        </Page>
    </AppProvider>,
    document.body.appendChild(document.createElement('div')),
  )
})