时间戳

首页 > 解决方案 > Shopify Polaris 页面标签不起作用 - Rails 和 reactJS

ruby-on-rails - Shopify Polaris 页面标签不起作用 - Rails 和 reactJS

问题描述

我正在尝试制作一个 shopify 应用程序，我想在带有北极星和 reactJS 的轨道上使用 ruby​​。当我尝试使用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')),
  )
})

它会将 ("One" "Two" "Three") 渲染到页面。当我运行我的 rails 服务器并刷新屏幕时，不会显示任何错误或警告。我通过运行以下命令下载了北极星：yarn add @shopify/polaris.

任何帮助是极大的赞赏。我试着在网上到处找，但我无法把这些碎片放在一起。提前致谢！

标签： ruby-on-railsreactjsshopify-apppolaris

解决方案

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

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

推荐阅读