如何在SAP Fiori應用裡使用React component

i042416發表於2020-02-17
React

在MyApp.jsx裡引入UI5針對React框架的開發的Card web Component：

如何在SAP Fiori應用裡使用React component


程式碼如下：

import React from 'react'
import { Card } from "@ui5/webcomponents-react";
export function MyApp() {
  return (
    <div>
      <Card heading="Card"></Card>
    </div>
  );
}

然後和正常的React應用一樣，在App.js裡引入我們自定義的Component：

如何在SAP Fiori應用裡使用React component


程式碼如下：

import React from "react";
import { MyApp } from "./MyApp";
import { ThemeProvider } from "@ui5/webcomponents-react/lib/ThemeProvider";
function App() {
  return (
    <ThemeProvider withToastContainer>
      <MyApp />
    </ThemeProvider>
  );
}
export default App;


這個Card Component是SAP釋出的針對React框架的標準元件。


可以在這個連結裡看到明細：


Storybook

如何在SAP Fiori應用裡使用React component



開發完畢後，npm start可以看到效果了：

如何在SAP Fiori應用裡使用React component


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2675812/，如需轉載，請註明出處，否則將追究法律責任。

相關文章