Persona -onRenderPrimaryText -传递附加参数？

Question

我正在遍历用户列表，想修改角色名称以超链接到特定页面。

          {this.props.users.map((u: any) => {

            //u has a property called u.ProfileUrl

            return (
              <div className={styles.personaTile}>
                <Persona
                  text={u.DisplayName}
                  size={PersonaSize.size48}
                  className={styles.persona}
                  imageInitials="true"
                  onRenderPrimaryText={this._onRenderPrimaryText}
                />
              </div>
            );
          })}

如何从 u 的 this.props.user 映射对象引用我的 onRenderPrimaryText 方法中的值？我不明白如何将它作为参数传递或从道具中引用它。我使用 props.componentRef 吗？

  private _onRenderPrimaryText = (props: IPersonaProps): JSX.Element => {
    return (
      <div className={styles.personaName}>
        <a href={  ???????  }>{props.text}</a>   // <-- How do I reference the u.ProfileUrl here?
      </div>
    );
    // tslint:disable-next-line:semicolon
  };

Answer 1

没有直接的方法来传递额外的数据，以便您可以在自定义渲染器中使用它，但是通过一点 JS 闭包魔法，我想出了 this working solution。如果您在项目和样式中关心它，那么您仍然需要玩的就是打字。从真正快速的角度来看，两者都是可行的。

const PersonaCustomRenderExample: React.FunctionComponent = () => {
  const personas = examplePersonas.map(examplePersona => {
    const customPrimaryTextRenderer = getCustomPrimaryTextRenderer(examplePersona);

    return (
      <Persona
        {...examplePersona}
        size={PersonaSize.size72}
        presence={PersonaPresence.offline}
        onRenderPrimaryText={customPrimaryTextRenderer}
        styles={{ root: { margin: "0 0 10px 0" } }}
        imageAlt="Annie Lindqvist, status is offline."
      />
    );
  });

  return <Stack tokens={{ childrenGap: 10 }}>{personas}</Stack>;
};

function getCustomPrimaryTextRenderer(persona) {
   return (props: IPersonaProps): JSX.Element => {
     return (
       <div>
         <a href={persona.profileUrl}>{props.secondaryText}</a>
       </div>
     );
  };
}

Persona -onRenderPrimaryText -传递附加参数？

Persona - onRenderPrimaryText - pass addt'l parameters?

reactjs

office-ui-fabric