显示姓名首字母，而不是头像

Question

我正在尝试在React JS前端实现一个头像选项，类似于Google Plus/Gmail所做的。如果没有可用的个人资料图片，则提取并显示名称中单词的第一个字母，而不是个人资料图片。

我已经做了适当的div和CSS来显示，缩写也会被提取出来，但不会显示。This image is a good example.

HTML：

<li className="nav-item">

                   <div id="container_acronym">
                     <div id="name_acronym">                        
                        {this.acronym_name(this.state.lead_details.customer_name)}
                     </div>
                    </div>                 
            </li>

CSS：

    #container_acronym {
    width: 90px;
    height: 90px;
    border-radius: 100px;
    background: #333;
  }
  #name_acronym {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 36px;
    line-height: 100px;
  }

JavaScript：

acronym_name(str){
    var regular_ex=/\b(\w)/g;
    var matches = str.match(regular_ex);
    var acronym = matches.join('');
    document.getElementById("name_acronym").innerHTML = acronym;
}

Answer 1

您需要从acronym_name(str)函数返回名称，而不是设置innerHTML，如：

...
acronym_name(str){
    var regular_ex=/\b(\w)/g;
    var matches = str.match(regular_ex);
    var acronym = matches.join('');
    //return the acronym
    return acronym;
}