如何向mgt-react的MS Graph组件传递额外数据/属性

我在React应用中使用mgt-react库对接MS Graph API，希望从Dashboard组件向Applications组件传递额外的groupId数据，但该库不支持标准的React组件传参方式。

原组件代码 #

Dashboard组件

function Dashboard(props: MgtTemplateProps) {
  const group = props.dataContext;
  const groupId = '%7B5a717ea1-f41a-415e-93ca-efcb845b2f99%7D';
  return (
    <div className="px-5">
      <Get resource={`groups/%7B${group.id}%7D`}>
        <GroupInfo template="default" />
      </Get>
      <div className="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 mt-5 ring-1 ring-slate-900/5 shadow-xl">
        <h3 className="top-0 text-slate-900 dark:text-white mb-5 text-base font-medium tracking-tight uppercase">
          Assigned Apps
        </h3>
        <Get resource="deviceAppManagement/mobileApps">
          <Applications template="value" />
        </Get>
      </div>
    </div>
  );
}

Applications组件

function Applications(props: MgtTemplateProps) {
  const apps = props.dataContext;
  return (
    <p className="text-slate-500 dark:text-slate-400 text-sm">{apps.displayName}</p>
  );
}

解决方法 #

因为mgt-react的模板组件依赖dataContext传递数据，无法直接通过props传参，这里用React Context API实现跨组件参数传递，步骤如下：

• 创建一个Context用于存储groupId
• 在Dashboard组件中用Context Provider包裹需要传参的区域，传入groupId
• 在Applications组件中通过自定义Hook读取Context中的groupId

修改后的代码 #

1. 创建GroupIdContext

import { createContext, useContext } from 'react';

// 创建Context，默认值为null
const GroupIdContext = createContext<string | null>(null);

// 封装自定义Hook，简化Context读取
export const useGroupId = () => useContext(GroupIdContext);

2. 更新Dashboard组件

import { GroupIdContext } from './GroupIdContext';

function Dashboard(props: MgtTemplateProps) {
  const group = props.dataContext;
  const groupId = '%7B5a717ea1-f41a-415e-93ca-efcb845b2f99%7D';
  
  return (
    <div className="px-5">
      <Get resource={`groups/%7B${group.id}%7D`}>
        <GroupInfo template="default" />
      </Get>
      <div className="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 mt-5 ring-1 ring-slate-900/5 shadow-xl">
        <h3 className="top-0 text-slate-900 dark:text-white mb-5 text-base font-medium tracking-tight uppercase">
          Assigned Apps
        </h3>
        {/* 用Provider包裹Get组件，把groupId传入Context */}
        <GroupIdContext.Provider value={groupId}>
          <Get resource="deviceAppManagement/mobileApps">
            <Applications template="value" />
          </Get>
        </GroupIdContext.Provider>
      </div>
    </div>
  );
}

3. 更新Applications组件

import { useGroupId } from './GroupIdContext';

function Applications(props: MgtTemplateProps) {
  const apps = props.dataContext;
  const groupId = useGroupId(); // 获取传递的groupId
  
  return (
    <div>
      <p className="text-slate-500 dark:text-slate-400 text-sm">{apps.displayName}</p>
      {/* 可根据需求使用groupId，比如后续调用Graph API时带上 */}
      {groupId && <p className="text-xs text-slate-400">关联分组ID: {groupId}</p>}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者adamwhiles