Shopify тег страницы Polaris не работает - Rails и реагировать JS

Question

Я пытаюсь сделать приложение shopify и хочу использовать ruby ​​на рельсах с polaris и responseJS. Когда я пытаюсь использовать Page компонент, взятый с сайта shopify, на экран ничего не выводится. Вот пример того, о чем я говорю.

Это мой файл 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')),
  )
})