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

我想在悬停或单击Person对象时，在显示的Person卡中插入其他详细信息。 我见过几个关于如何使用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>

###

---

如何从这里开始？

它的工作原理应该类似，不同之处在于使用div而不是模板标记：*编辑：

  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>
    );
  }

render（）{
var MyAnimalFriends=MyAnimalFriends=（MgtTemplateProps）=>{
var personData=MgtTemplateProps.dataContext；
console.log（personData）//返回与此人相关的数据
返回
毛绒玩具朋友：

长颈鹿
狮子
兔子
{personData.person.givenName}

;
};
返回(
);
}

Frank，看看mgt react的模板部分是否有助于您的理解：如果没有，请告诉我任何细节。您好，我已经用示例更新了我的初始问题。请提供建议。谢谢！添加此代码时出现以下错误：类型DIV上不存在属性“template”。如何解决此问题？似乎这实际上是错误的，最好通过事件来解决。我已经用js版本更新了评论。再次感谢。当我尝试更新的代码示例时，将呈现Person卡组件，而不是Person组件。将鼠标悬停在Person组件上时，应该呈现Person卡组件。