Javascript 使用React，通过单击同名按钮加载文件的简单方法是什么？

我曾经在jQuery中创建了一个站点。在这个站点上，您可以自定义角色，图像将根据您选择的内容加载。在幕后，文件名是从您单击的菜单选项复制的。例如

假设你想要一个瘦女人。转到子菜单并单击“skinny”，然后单击“female”。程序将从刚才单击的选项中存储“skinny”和“female”（使用

.text（）

）。然后，它使用简单的连接将显示的图像更新为skinny-female.svg。网站在这里

---

对于react，我已经很困惑了，因为必须以变量名而不是文件路径存储图像。我需要一种拆分变量名的方法，如上面的示例所示。然后，可以根据用户的选择将变量名放回一起。

每当用户单击相应的按钮时，可以使用

event.target.innerText

将图像名存储在状态变量中。然后，可以基于这些状态变量设置图像的

src

属性

大概是这样的：

import React from 'react';

class ImageSelector extends React.Component {
  constructor() {
    super();

    this.state = {
      imageName1: '',
      imageName2: ''
    }
  }

  render() {

    let imgSrc = this.state.imageName1 + '-' + this.state.imageName2 + '.svg';

    return(
      <div>
        <button onClick={(ev) => this.setState({ imageName1: ev.target.innerText})}>skinny</button>
        <button onClick={(ev) => this.setState({ imageName2: ev.target.innerText})}>female</button>
        <img src={imgSrc} />
      </div>
    );

  }
}

从“React”导入React；
类ImageSelector扩展了React.Component{
构造函数（）{
超级（）；
此.state={
imageName1:“”，
imageName2:“”
}
}
render（）{
让imgSrc=this.state.imageName1+'-'+this.state.imageName2+'.svg'；
返回(
this.setState（{imageName1:ev.target.innerText}}>skinny
this.setState（{imageName2:ev.target.innerText}}>
);
}
}