如何在没有 ReactJS 的情况下使用 Shopify Polaris？答案

【问题标题】：How to use Shopify Polaris without ReactJS?如何在没有 ReactJS 的情况下使用 Shopify Polaris？
【发布时间】：2018-05-18 06:44:47
【问题描述】：

我正在使用 Shopify Polaris 创建 Shopify 嵌入式应用程序。我必须在嵌入式应用程序的页面中包含一个模式表单。我知道我必须使用this。但我没有使用 ReactJS。所以我不能在模态中改变形式。我不知道该怎么做。如果有人知道解决方案，将不胜感激。

我还注意到一件事。我尝试过“数字字段”输入（从here 的下拉列表中选择数字字段）。递增和递减箭头键在示例中有效，但在我的表单中无效。

这是我的代码

<html>
    <head>
        <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0-rc.3/polaris.min.css" />
    </head>
    <body>
        <div class="">
            <div class="Polaris-Labelled__LabelWrapper">
                <div class="Polaris-Label">
                    <label id="TextField3Label" for="TextField3" class="Polaris-Label__Text">Quantity</label>
                </div>
            </div>
            <div class="Polaris-TextField Polaris-TextField--hasValue">
                <input id="TextField3" class="Polaris-TextField__Input" type="number" aria-labelledby="TextField3Label" aria-invalid="false" value="1">
                <div class="Polaris-TextField__Spinner" aria-hidden="true">
                    <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
                        <div class="Polaris-TextField__SpinnerIcon"> 
                            <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M15 12l-5-5-5 5z"></path></svg></span>
                        </div>
                    </div>
                    <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
                        <div class="Polaris-TextField__SpinnerIcon">        
                            <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path></svg></span>
                        </div>
                    </div>
                </div>
                <div class="Polaris-TextField__Backdrop"></div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

恕我直言，如果您不使用 React，那么您最好也不要使用 Polaris。您可以通过重用 Polaris 的样式来模仿 Shopify UI，它必须更容易编写和维护您的代码。

标签： javascript shopify polaris

【解决方案1】：

很抱歉，如果不在 Shopify Polaris 中使用 React Js，那么它将只是 HTML 和 CSS 基本代码。

不支持 js 事件，如模型选项卡、隐藏显示等。你需要用基本的 javascript 或 jQuery 自己编写。

【讨论】：