如何將Polymer + Node.JS JavaScript應用程序與React + TypeScript集成

Question

我最近的任務是將React + TypeScript與包含許多出色的Polymer組件（Predix UI Starter）的現有啟動器應用程序集成。 我知道這對某些人來說似乎毫無意義（畢竟，您可以使用Polymer作為框架來提供應用程序狀態和邏輯）。 但是，React 庫和TypeScript的面向對象性質提供了很多東西，那么從這里開始的一些技巧是什么？

Answer 1

我將把Predix UI Starter與create-react-app starter集成在一起。 具體來說，我將啟用React組件來渲染（）px-下拉聚合物組件。 此概念和方法可以應用於任何聚合物啟動器應用程序。 這並不能完全整合這兩個起動器，它只是用於在陣營render（）方法再現的聚合物組分，使用打字稿一個POC。

克隆這兩個倉庫。 使用Predix UI Starter進行操作-運行npm install和bower install它將包含所有組件。

確保Predix UI Starter中的package.json包含react應用程序包含的所有依賴項和devDependencies 。 在package.json文件的scripts對象中，將"start" : ...,更改為"start" : "react-scripts-ts start" 。 這將使用TypeScript將應用程序服務到localhost（這是tsconfig.json和tslint.json文件起作用的位置）。

將tsconfig.json ， tslint.json和tsconfig.test.json文件復制到Predix UI Starter的根目錄中。

根據React應用程序的命名約定，將server文件夾重命名為src 。 在.bowerrc文件中，將public/附加在bower_components之前，這將使public/index.html文件能夠導入bower生成的聚合物組分。 除非進行配置，否則public/index.html將無法將父文件夾中的聚合物組件加載到public文件夾中。 （用戶可能需要配置Predix Starter才能最初提供public/index.html文件）。

從反應起動到Predix啟動器，復制App.tsx和index.tsx文件到src文件夾和復制index.html文件的public文件夾（這個文件是什么應用程序最初提供）。

將px-dropdown組件添加到JSX命名空間，以便您可以通過將global.d.ts文件添加到具有以下內容的根目錄中來在react組件中呈現它：

declare namespace JSX { interface IntrinsicElements { 'px-dropdown': any } }

現在，您可以渲染（） px-dropdown組件了。 在public/index.html文件中，使用以下兩行（在<head>標記內）導入組件：

<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/px-dropdown/px-dropdown.html" />

讓我們將一些items傳遞給App Component的props 。 在index.tsx文件中，編輯使組件呈現為類似於<App items={'[{"key":"1", "val": "One"},{"key" : "2", "val": "Two"}]'}/>

App.tsx的以下代碼將成功呈現px-dropdown組件：

    class App extends React.Component<any, any> {
        constructor (props: any) {
          super(props);
        }
        render() {
          ...
          return (
            <div className="App">
              ...
              <px-dropdown
                items={this.props.items}
                sort-mode="key"
                button-style="default"
                display-value="Select"
                disable-clear>
              </px-dropdown>
            </div>
      );
    }
 }

現在您可以開始使用React + TypeScript渲染Polymer組件了。

如何將Polymer + Node.JS JavaScript應用程序與React + TypeScript集成

問題描述

1 個解決方案

解決方案1
0 2017-11-16 15:51:27

如何將Polymer + Node.JS JavaScript應用程序與React + TypeScript集成

問題描述

1 個解決方案

解決方案1 0 2017-11-16 15:51:27

解決方案1
0 2017-11-16 15:51:27