0

我想在悬停或单击人员对象时将其他详细信息插入显示的人员卡中。我已经看到了几个关于如何使用 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>

如何从这里开始？

4

2 回答 2

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>
    );
  }
于 2020-12-22T23:21:42.333 回答
0

设法获得一个自定义 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>
    );
  }
于 2021-10-20T07:35:52.040 回答