Javascript 显示用户'；在ReactJS中的SVG上的首字母s

我需要用户的首字母出现在头像上（菜单中的一个是SVG），只有一个带有这些首字母的灰色圆圈。我有这个函数，但现在我不知道如何在下拉菜单的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（）{
让我们一起来吧；
让用户使用首字母；
让我们完成；
if（this.state.user）{
阿凡达笠美=
this.state.user.avatarImage==null | | this.state.user.avatarImage==“image.jpg”
（！这个.道具.口袋？
“数据：图像/png；base64，”+biquetteBase64
: "https://images-publiques.s3.amazonaws.com/avatar.png")
: `https://smartsplit-images.s3.us-east-2.amazonaws.com/${this.state.user.avatarImage}`；
用户姓名首字母=
this.state.user.avatarImage==null？this.state.initials:null；
nomplete=this.state.user.artistName
？this.state.user.artistName
：`${this.state.user.firstName}${this.state.user.lastName}`；
}
让菜单=(
);

返回(
{nomplett}
//这里呢
{！userInitials&&(
)}
{menu}
);
}

您可能需要添加自定义HTML+CSS，并重新使用语义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>

根据你的需要调整。

---

您可能需要添加自定义HTML+CSS，并重新使用语义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>

根据你的需要调整。

---

在方法

中，组件将挂载
您在哪里声明res？我在任何地方都找不到它？如果您正在进行提取或类似操作，则必须在componentWillMount:
axios.get（“http://dev.api.smartsplit.org:8080/v1/rightHolders/“+this.state.auth.username）。然后（res=>{this.setState（{user:res.data.Item}）
很抱歉，我粘贴的代码数量有限。在方法
componentWillMount
中，您在哪里声明res？我在任何地方都找不到它？如果您正在进行提取或类似操作，您必须在组件willmount中的
componentDidMount
中执行此操作：
axios.get（"http://dev.api.smartsplit.org:8080/v1/rightHolders/“+this.state.auth.username）。然后（res=>{this.setState（{user:res.data.Item}）；
很抱歉，我粘贴的代码数量有限。
<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>

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