Microsoft Graph Toolkit - 如何使用 React 在个人卡片中插入其他详细信息答案

【问题标题】：Microsoft Graph Toolkit - How to insert additional details in Person Card using ReactMicrosoft Graph Toolkit - 如何使用 React 在个人卡片中插入其他详细信息
【发布时间】：2021-04-01 03:46:18
【问题描述】：

我想在悬停或单击 Person 对象时显示的 Person Card 中插入其他详细信息。我已经看到了几个关于如何使用 Web 组件来实现这一点的示例，但没有一个关于使用 React 版本进行设置的示例。

您能否提供一个示例，例如这个，但对于 React：

<mgt-person person-query="me" view="twolines" person-card="hover">
      <template data-type="person-card">
        <mgt-person-card inherit-details>
          <template data-type="additional-details">
            <h3>Stuffed Animal Friends:</h3>
            <ul>
              <li>Giraffe</li>
              <li>lion</li>
              <li>Rabbit</li>
            </ul>
          </template>
        </mgt-person-card>
      </template>
</mgt-person>

我的示例代码：

<Person userId={val.person} view={cf.GetPersonViewMode(this.props.roleSize)} fetchImage={true} showPresence={true}
                    personCardInteraction={PersonCardInteraction.hover} line2Property="mail">
                      <PersonCard inheritDetails={true}>
                        ###
                      </PersonCard>
                  </Person>

如何从这里开始？

【问题讨论】：

Frank，看看 mgt-react 的模板部分是否有助于您理解：npmjs.com/package/@microsoft/mgt-react 如果没有，请告诉我任何细节。
嗨，我已经用示例更新了我的初始问题。请指教。

标签： reactjs sharepoint spfx microsoft-graph-toolkit

【解决方案1】：

它应该类似地工作，不同之处在于 div 而不是模板标签：*EDIT:

  render() {
    var MyAnimalFriends = MyAnimalFriends = (MgtTemplateProps) => {
      var personData = MgtTemplateProps.dataContext;
      console.log(personData) //returns data pertaining to the person
      return <div>
        <h3>Stuffed Animal Friends:</h3>
          <ul>
            <li>Giraffe</li>
            <li>lion</li>
            <li>Rabbit</li>
            <li>{personData.person.givenName}</li>
          </ul>
      </div>;
    };
    return (
      <div className="App">
        <Person personQuery="me">
          <PersonCard inheritDetails={true}>
            <MyAnimalFriends template="additional-details">
            </MyAnimalFriends>
          </PersonCard>
        </Person>
      </div>
    );
  }

【讨论】：

谢谢！添加此代码时出现以下错误：属性“模板”在类型 DIV 上不存在。我该如何解决这个问题？
看起来这实际上是错误的，最好通过事件来做到这一点。我已经用js版本更新了评论。
再次感谢您。当我尝试更新的代码示例时，会呈现 Person Card 组件而不是 Person 组件。将鼠标悬停在 Person 组件上时应呈现 Person Card 组件。

【解决方案2】：

设法获得一个自定义 PersonCard 显示悬停与其他详细信息。您需要将自定义人员卡片包装到它自己的模板中（下面的CustomPersonCard）并在自定义卡片实例上设置模板道具以指定它是该人员的人员卡片。

render() {

    var CustomPersonCard = CustomPersonCard = (MgtTemplateProps) => {
      return <PersonCard inheritDetails={true}>
                <MyAnimalFriends template="additional-details">
                </MyAnimalFriends>
              </PersonCard>
    }

    var MyAnimalFriends = MyAnimalFriends = (MgtTemplateProps) => {
      var personData = MgtTemplateProps.dataContext;
      console.log(personData) //returns data pertaining to the person
      return <div>
        <h3>Stuffed Animal Friends:</h3>
          <ul>
            <li>Giraffe</li>
            <li>lion</li>
            <li>Rabbit</li>
            <li>{personData.person.givenName}</li>
          </ul>
      </div>;
    };

    return (
    <div className="App">
      <Person personQuery="me">
            <CustomPersonCard template="person-card">
            </CustomPersonCard>
      </Person>
    </div>
    );
  }

【讨论】：