购物北极星页面标签不工作- Rails和reactJS

Question

我正在尝试做一个购物应用程序，我想在北极星和reactJS中使用ruby on rails。当我尝试使用取自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服务器并刷新屏幕时，没有显示任何错误或警告。我通过运行以下命令下载了北极星：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')),
  )
})