javascript - 如何将按钮列表重构为 map 功能

Question

在我的刽子手游戏中，玩家可以单击 一封信(按钮) 猜测的字母显示 如果正确，它将附加到隐藏单词 (_ _ _ _ )

但我想重构一长串按钮 变成一个简单的 map 函数 为数组中的每个字母(即字母表)创建一个按钮 理想情况下，该按钮在单击后会消失。

类似于:

arr = [alphabet]
arr.map(letter=>{
return <button>{letter}</button> 
})

但我不知道如何将我的列表转换为这样的函数

export class Input extends Component {

  handleClick = (event) => {

    if (this.props.guesses.includes(event.target.value)) {

    } else {
      this.props.makeGuess(event.target.value.toLowerCase())
    }
    // event.target.setAttribute('disabled', '')

  }

  render() {
    return (<div>

      <button onClick={this.handleClick} value="A">A</button>
      <button onClick={this.handleClick} value="B">B</button>
      <button onClick={this.handleClick} value="C">C</button>
      <button onClick={this.handleClick} value="D">D</button>
      <button onClick={this.handleClick} value="E">E</button>
      <button onClick={this.handleClick} value="F">F</button>
      <button onClick={this.handleClick} value="G">G</button>
      <button onClick={this.handleClick} value="H">H</button>
      <button onClick={this.handleClick} value="I">I</button>
      <button onClick={this.handleClick} value="J">J</button>
      <button onClick={this.handleClick} value="K">K</button>
      <button onClick={this.handleClick} value="L">L</button>
      <button onClick={this.handleClick} value="M">M</button>
      <button onClick={this.handleClick} value="N">N</button>
      <button onClick={this.handleClick} value="O">O</button>
      <button onClick={this.handleClick} value="P">P</button>
      <button onClick={this.handleClick} value="Q">Q</button>
      <button onClick={this.handleClick} value="R">R</button>
      <button onClick={this.handleClick} value="S">S</button>
      <button onClick={this.handleClick} value="T">T</button>
      <button onClick={this.handleClick} value="U">U</button>
      <button onClick={this.handleClick} value="V">V</button>
      <button onClick={this.handleClick} value="W">W</button>
      <button onClick={this.handleClick} value="X">X</button>
      <button onClick={this.handleClick} value="Y">Y</button>
      <button onClick={this.handleClick} value="Z">Z</button>
    </div>)
  }
}

Answer 1

你的渲染方法应该是:

render() {
  const alphabet = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];

  return (
    <div>
      {alphabet.map((letter, index) => <button key={} onClick={this.handleClick} value={letter}>{letter}</button>)}
    </div>
  );
}