在更真實的世界中，應用程序一般都是基於框架開發，而不僅僅是HTML+JavaScript的。本篇就介紹一下如何在React框架中使用Microsoft Graph Toolkit，我們將編寫一個簡單的日程查看Web應用。
創建React的Web應用
首先我們當然是創建一個React的Web應用。
找一個喜歡的路徑，打開命令行工具跳轉到該目錄，輸入命令創建React項目。
npx create-react-app mgt-demo --template typescript
這裏我們添加了template參數來告訴這個React項目使用TypeScript語言。
創建好之後通過命令npm install @microsoft/mgt –save添加Microsoft Graph Toolkit的npm庫。
使用Microsoft Graph Toolkit Providers
我們可以根據實際的場景選擇恰當的Provider，就像之前介紹的那樣。本例中我們使用MsalProvider。打開App.tsx文件，添加以下代碼，用於Provider的設置，將其中的[CLIENT_ID]換成我們真實的。
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
Providers.globalProvider = new MsalProvider({ clientId: '[CLIENT_ID]' });
Providers.globalProvider.onStateChanged((e) => {
if (Providers.globalProvider.state !== ProviderState.Loading)
setIsLoggedIn(Providers.globalProvider.state === ProviderState.SignedIn);
});
...
}
在React中使用Microsoft Graph Toolkit組件
在index.tsx文件中，添加以下聲明：
declare global {
namespace JSX {
interface IntrinsicElements {
'mgt-login': any;
'mgt-agenda': any;
'mgt-person': any;
}
}
}
通過上面這種方式，能夠讓我們的TSX識別Microsoft Graph Toolkit的組件標記以防止發生問題，如果有新的其他組件的需求，可以繼續在IntrinsicElements接口中添加“'[COMPONENT NAME]’: any”這種格式的內容即可。
首先我們先寫一個登錄組件。
import React from 'react';
import '@microsoft/mgt';
const NavBar = () => {
return (
<nav>
<mgt-login></mgt-login>
</nav>
);
}
export default NavBar;
由於是示例這裏只是簡單地用了一下mgt-login的標籤，如果想的話當然可以設置它的一些屬性。
接下來添加mgt-agenda組件，我們計劃使用自定義模板。但是這時我們會面臨一個問題，那就是自定義模板中也會使用大括號{}，這會產生衝突。
要解決這個問題有兩個選項：
- 修改Microsoft Graph Toolkit中的綁定語法，這樣操作：
import { TemplateHelper } from '@microsoft/mgt';
TemplateHelper.setBindingSyntax('[[', ']]');
- 第二種也是我們本例中使用的方式，使用data-屬性直接進行DOM元素的綁定代碼如下。
import React, { useRef, useEffect } from 'react';
import '@microsoft/mgt';
const AgendaWC = () => {
const agendaRef = useRef<any>(null);
useEffect(() => {
agendaRef.current.templateContext = {
openWebLink: (e: any, context: { event: { webLink: string | undefined; }; }, root: any) => {
window.open(context.event.webLink, '_blank');
},
getDate: (dateString: string) => {
let dateObject = new Date(dateString);
return dateObject.setHours(0, 0, 0, 0);
},
getTime: (dateString: string) => {
let dateObject = new Date(dateString);
return dateObject.getHours().toString().padStart(2, '0') + ':' + dateObject.getMinutes().toString().padStart(2, '0');
}
}
}, []);
return (
<mgt-agenda group-by-day ref={agendaRef}>
<template data-type="event">
<div className="...">
<div className="..."
data-props="{{@click: openWebLink, innerHTML: event.subject}}" />
<div className="..." data-if="getDate(event.start.dateTime) == getDate(event.end.dateTime)"
data-props="{{innerHTML: 'from ' + getTime(event.start.dateTime) + ' to ' + getTime(event.end.dateTime)}}" />
<div className="..." data-if="event.body.content != ''"
data-props="{{innerHTML: event.body.content}}" />
</div>
</template>
<template data-type="no-data">
<div className="...">
No events to show
</div>
</template>
</mgt-agenda>
);
}
export default AgendaWC;
至此，我們可以將上面提到的兩個組件放到"App"中了：
import React, { useState } from 'react';
import { Providers, MsalProvider, ProviderState } from '@microsoft/mgt';
import NavBar from './navBar'
import AgendaWC from './agendaWC'
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
Providers.globalProvider = new MsalProvider({ clientId: [CLIENT_ID]' });
Providers.globalProvider.onStateChanged((e) => {
if (Providers.globalProvider.state !== ProviderState.Loading)
setIsLoggedIn(Providers.globalProvider.state === ProviderState.SignedIn);
});
return (
<div>
<NavBar />
{(isLoggedIn) ?
<div className="...">
<div>
<h1 className="...">
Agenda
</h1>
<AgendaWC />
</div>
</div>
:
<div className="...">
Login to show data
</div>
}
</div>
);
}
export default App;
通過mgt-react使用Microsoft Graph Toolkit
一種在React中集成Microsoft Graph Toolkit更簡潔的方式是使用mgt-react庫，這個庫實際上是將Microsoft Graph Toolkit的組件封裝了一層，我們看一下如何使用。
首先添加npm包：
npm install mgt-react -–save
然後引入我們想要使用的組件：
import { Agenda, MgtTemplateProps } from 'mgt-react';
Microsoft Graph Toolkit的所有組件都在React組件中做了相應的映射。
在模板部分，跟前面介紹的就不一樣了，我們可以充分利用React的強大了。
我們可以首先定義一個包含MgtTemplaeProps對象的React組件：
import { MgtTemplateProps } from 'mgt-react';
const MyEvent = (props: MgtTemplateProps) => {
const { event } = props.dataContext;
return <div>{event.subject}</div>;
};
然後在Agenda的組件中這樣使用模板：
import { Agenda } from 'mgt-react';
const App = (props) => {
return <Agenda>
<MyEvent template="event">
</Agenda>
}
通過這樣的方式，我們之前的代碼就可以寫成下面這樣：
import React from 'react';
import '@microsoft/mgt';
import { Agenda, MgtTemplateProps } from 'mgt-react';
const AgendaReact = () => {
return (
<Agenda groupByDay={true} >
<Event template="event" />
<NoData template="no-data" />
</Agenda>
);
}
const Event = (props: MgtTemplateProps) => {
const { event } = props.dataContext;
const openWebLink = () => {
window.open(event.webLink, '_blank');
};
const getDate = (dateString: string) => {
let dateObject = new Date(dateString);
return dateObject.setHours(0, 0, 0, 0);
};
const getTime = (dateString: string) => {
let dateObject = new Date(dateString);
return dateObject.getHours().toString().padStart(2, '0')
+ ':' +
dateObject.getMinutes().toString().padStart(2, '0');
};
return (
<div className="...">
<div className="..." onClick={() => { openWebLink(); }}>
{event.subject}
</div>
{(getDate(event.start.dateTime)
== getDate(event.end.dateTime)) ?
<div className="...">
from {getTime(event.start.dateTime)}
to {getTime(event.end.dateTime)}
</div>
: null
}
{(event.body.content != '') ?
<div className="..."
dangerouslySetInnerHTML={{ __html: event.body.content }} />
: null
}
</div>
);
};
const NoData = (props: MgtTemplateProps) => {
return <div className="...">
No events to show
</div>
};
export default AgendaReact;
向React應用添加樣式
顯然之前我們沒有提及這個示例樣式方面的內容。因爲Microsoft Graph Toolkit組件自身已經具有樣式，但是當我們使用模板時，我們需要爲定義的模板指定樣式。
這裏就不做展示了，但是爲大家介紹一個比較有趣的CSS框架，Tailwind CSS，安裝它。
npm install tailwindcss -–save
使用前我們要先在src根目錄創建一個CSS文件如tailwind.css並添加如下內容：
@tailwind base;
@tailwind components;
@tailwind utilities;
這樣Tailwind CSS編譯器就能夠生成相應的樣式內容。
至於使用什麼樣的樣式大家可以自行了解後去嘗試了。
Tailwind CSS官網：https://tailwindcss.com/
微軟官方完整的React應用代碼示例地址：
https://github.com/microsoftgraph/mgtLap-TryItOut