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

Question

我曾经用 jQuery 制作过一个网站。在此站点上，您可以自定义字符，并且图像将根据您选择的内容进行加载。在幕后，文件名是从您单击的菜单选项中复制的。例如...

假设您想要一位瘦削的女性。您进入子菜单并单击“瘦”，然后单击“女性”。该程序存储您刚刚单击的选项中的“skinny”和“female”(使用 .text())。然后，它使用简单的串联将显示的图像更新为 Skinny-female.svg。该网站在这里...

http://matiny.altervista.org/VI/vice-bodies/

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

Answer 1

只要用户单击相应的按钮，您就可以使用 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>
    );

  }
}