在ReactJS中的SVG顶部显示用户的首字母缩写

Question

我需要用户的姓名缩写出现在头像（是SVG）上，只是带有这些姓名缩写的灰色圆圈。我有这个功能，但是现在我不知道如何在下拉菜单（这是一个SemanticUI库）的JSX中调用它。有什么提示吗？

const textToImage = require('text-to-image')

  componentWillMount() {
        let P = "", N = ""
        if (res.data.Item.firstName && res.data.Item.firstName.length > 0) P = res.data.Item.firstName.charAt(0).toUpperCase()
        if (res.data.Item.lastName && res.data.Item.lastName.length > 0) N = res.data.Item.lastName.charAt(0).toUpperCase()

        this.setState({
          initials: P + N
        }, () => {
          textToImage.generate(this.state.initials, { maxWidth: 30, maxHeight: 30 })
            .then(dataUri => {
              this.setState({ avatarInitiales: dataUri })
            })
        });
      })
  }

  render() {
    let avatarImage;
    let userInitials;
    let nomComplet;

    if (this.state.user) {
      avatarImage =
        this.state.user.avatarImage === null || this.state.user.avatarImage === "image.jpg"
          ? (!this.props.pochette ?
            "data:image/png;base64," + biquetteBase64
            : "https://images-publiques.s3.amazonaws.com/avatar.png")
          : `https://smartsplit-images.s3.us-east-2.amazonaws.com/${this.state.user.avatarImage}`;
      userInitials =
        this.state.user.avatarImage === null ? this.state.initials : null;
      nomComplet = this.state.user.artistName
        ? this.state.user.artistName
        : `${this.state.user.firstName} ${this.state.user.lastName}`;
    }

    let menu = (
            <Dropdown text="" icon="angle down big black">
              <Dropdown.Menu icon="down small">
                <Dropdown.Item
                  content={nomComplet}
                  text={this.state.initials} //Not sure what to do around here
                  image={<AvatarInitialsSVG />}
                />
              </Dropdown.Menu>
            </Dropdown>     
    );

    return (
          <>
            <div className="ui five wide column avatar--image profile"></div>
              {nomComplet}
            </Label>
            //And here
            {!userInitials && (
              <img src={avatarImage} alt="user--avatar" className="user--img" />
            )}
            {menu}
          </>
    );
  }

Answer 1

您可能需要添加自定义HTML + CSS，并重新使用Semantic-UI中的某些类。

尝试这样的事情：

<Dropdown.Item>
  <React.Fragment>
    <div className="custom-initials-holder">
      <AvatarInitialsSVG/>
      <span className="custom-initials">{this.state.initials}</span>
    </div>
    <span className="text">{nomComplet}</span>
  </React.Fragment>
</Dropdown.Item>

并且您的自定义CSS覆盖：

.custom-initials-holder {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-initials-holder > svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

根据您的需要进行调整。Small demo