更新时间:2023-02-08 18:06:14
我将集成 Predix UI Starter 和 create-react-app启动器.具体来说,我将启用React组件来渲染()px-下拉聚合物组件.此概念和方法可以应用于任何聚合物启动器应用程序. 不不完全集成这两个启动器,它仅是一个POC,用于使用TypeScript在React render()方法中渲染聚合物组件.
I will be integrating the Predix UI Starter with the create-react-app starter. Specifically, I will enable a React Component to render() a px-dropdown polymer component. This concept and method can apply to any polymer starter app. This DOES NOT completely integrate these two starters, it is ONLY a POC for rendering a polymer component in a React render() method, using TypeScript.
克隆这两个仓库.在Predix UI Starter中工作-一旦运行npm install
和bower install
,它将包含所有组件.
Clone both of these repos. Work out of the Predix UI Starter - this will contain all of the components once you run npm install
and bower install
.
确保Predix UI Starter中的package.json
包含react应用程序包含的所有依赖项和 devDependencies .在package.json
文件中的scripts
对象中,将"start" : ...,
更改为"start" : "react-scripts-ts start"
.这将使用TypeScript(这是tsconfig.json
和tslint.json
文件起作用的位置)将应用程序提供给localhost.
Ensure that the package.json
in the Predix UI Starter contains all of the dependencies and devDependencies that the react app contains. In the package.json
file, in the scripts
object, change "start" : ...,
to "start" : "react-scripts-ts start"
. This will serve the app to localhost using TypeScript (this is where the tsconfig.json
and the tslint.json
files come into play).
将tsconfig.json
,tslint.json
和tsconfig.test.json
文件复制到Predix UI Starter的根目录中.
Copy the tsconfig.json
, tslint.json
, and the tsconfig.test.json
files into the root directory of the Predix UI Starter.
根据React应用程序的命名约定,将server
文件夹重命名为src
.在.bowerrc
文件中,在bower_components
之前附加public/
,这将使public/index.html
文件能够导入Bower生成的聚合物组分.除非进行配置,否则public/index.html
将无法将父文件夹中的聚合物组件加载到public
文件夹中. (用户可能需要配置Predix Starter最初为public/index.html
文件提供服务.)
As per the naming convention for React apps, rename the server
folder to src
. In the .bowerrc
file, append public/
before bower_components
, this will enable the public/index.html
file to import polymer components generated by bower. Unless configured to do so, public/index.html
will be unable to load polymer components in parent folders to the public
folder. (The user may need to configure the Predix Starter to initially serve the public/index.html
file).
从React Starter到Predix Starter,将App.tsx
和index.tsx
文件复制到src
文件夹,然后将index.html
文件复制到public
文件夹(该文件将是应用最初投放).
From the react starter to the Predix starter, copy the App.tsx
and the index.tsx
files to the src
folder, and copy the index.html
file to the public
folder (this file will be what the app initially serves).
将px-dropdown
组件添加到JSX名称空间,以便您可以通过将global.d.ts
文件添加到具有以下内容的根目录来在react组件中呈现它:
Add the px-dropdown
component to the JSX namespace so that you can render it within a react component by adding a global.d.ts
file to the root directory with the following content:
declare namespace JSX {
interface IntrinsicElements {
'px-dropdown': any
}
}
declare namespace JSX {
interface IntrinsicElements {
'px-dropdown': any
}
}
您现在可以渲染()px-dropdown
组件了.在public/index.html
文件中,使用以下两行(在<head>
标记内)导入组件:
You are now ready to render() the px-dropdown
component. In the public/index.html
file, import the component using the following two lines (within the <head>
tag):
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/px-dropdown/px-dropdown.html" />
让一些items
传递给App
组件的props
.在index.tsx
文件中,编辑使组件呈现为<App items={'[{"key":"1", "val": "One"},{"key" : "2", "val": "Two"}]'}/>
Let's pass some items
to the props
of the App
Component. In the index.tsx
file, edit the line that renders the component to look like <App items={'[{"key":"1", "val": "One"},{"key" : "2", "val": "Two"}]'}/>
App.tsx
中的以下代码将成功呈现px-dropdown
组件:
The following code in App.tsx
will render the px-dropdown
component successfully:
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组件了.
You are now ready to begin rendering Polymer components using React + TypeScript.