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引用它。我要使用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>
     );
  };
}