问题

I'm here to help with the translation. Here's the translated code:

我对React非常新手，但我无法在任何地方找到答案（我看到了很多使用React Native的示例，但这是用于PC上的Web查看）。我有一个非常简单的页面/应用，目前使用HTML、CSS、JS运行，并允许用户按下键盘上的按键（这些按键被映射为按钮）来猜一个单词。尝试将其重写为React似乎相当困难，我想知道：

A）是否已经有人做过这个？
B）是否有人有关于如何将其转换为React组件的指针，因为我找不到与导入React Native库无关的信息？

我在简单的Web视图（HTML、CSS、JS）中的JS如下所示：

```javascript
function generateButtons() {
    /*
        字母字符串使用split()拆分为单个字母
        使用.map(letter => ...)将每个字母映射为一个函数
            buttonsHTML将所有字母作为<button>元素写入.html文件，并创建一个onClick事件监听器，
            该事件监听器调用handleGuess()函数
    */

    let buttonsHTML = 'abcdefghijklmnopqrstuvwxyz'.split('').map(letter =>
        `
            <button
            class="keys"
            id='${letter}'
            onClick="handleGuess('${letter}')"
            >
            ${letter}
            </button>
        `).join('');

    // 将buttonsHTML的值分配给HTML id键盘
    document.getElementById('keyboard').innerHTML = buttonsHTML;
}

而我的React应用程序目前非常简陋，如下（App.js）：

import './App.css';
import React from 'react';

function GameTitle() {
  return (
    <h1>随机单词猜测游戏</h1>
  )
}

function GamePrompt() {
  return (
    <p>要猜的单词：</p>
  )
}

function SetDifficulty() {
  return (
    <label>
      设置难度级别：
      <select>
        <option value="setEasy">简单</option>
        <option value="setMedium">中等</option>
        <option value="setHard">困难</option>
      </select>
    </label>
  )
}

function GuessCounter() {
  return(
    <p>猜测次数： </p>
  )
}

const alphabet = [
  "A", "B", "C", "D", "E", "F", "G", "H", "I",
  "J", "K", "L", "M", "N", "O", "P", "Q", "R",
  "S", "T", "U", "V", "W", "X", "Y", "Z"
];

function GameKeyboard() {
  return(
    <>
    {alphabet.map(letter => (
        <button
          key={letter}
          className="keys"
          onClick={() => handleGuess(letter)}
        >
          {letter}
        </button>
    ))}
    </>
  )
}

function App() {
  return (
    <div>
      <>
        <GameTitle />
        <GamePrompt />
      </>
      <SetDifficulty />
      <GuessCounter />
      <GameKeyboard />
    </div>
  );
}

export default App;

我已经尝试重新创建了一个字母设置（使用const并显示它），但当我尝试实现映射到字母元素的按钮组件时，我无法找出正确的语法以将其用作<Button>组件。

<details>
<summary>英文:</summary>
I am incredibly new to React but I could not find this answer anywhere (I have seen a lot of examples using React-native but this is for web viewing on PC). I have a really simple page/app that runs using HTML, CSS, JS currently and allows the user to press keys on a keypad (which are mapped as buttons) to guess a word. Trying to rewrite this for React is proving pretty daunting and I was wondering if:
A) This is something that someone else has already done?
B) If someone has pointers on how to translate this over into a React component as I cannot find any information on this that is not directly related to importing react-native libraries?
My JS in the simple web view (HTML, CSS, JS) looks like this:

function generateButtons() {
/*
alphabet str is split into individual letters with split()
each letter is mapped with a function .map(letter => ...)
buttonsHTML write all letters as <button> elements within
the .html file and creates an onClick event listener that
calls handleGuess() function
*/

    let buttonsHTML = 'abcdefghijklmnopqrstuvwxyz'.split('').map(letter =>
`
<button
class="keys"
id='` + letter + `'
onClick="handleGuess('` + letter + `')"
>
` + letter + `
</button>
`).join('');
// assigns the value of html id keyboard to buttonsHTML 
document.getElementById('keyboard').innerHTML = buttonsHTML;
}

And my incredibly barebones React app currently looks like this (App.js):

import './App.css';
import React from 'react';

function GameTitle() {
return (
<h1>Random Word Guessing Game</h1>
)
}

function GamePrompt() {
return (
<p>Word to be guessed:</p>
)
}

function SetDifficulty() {
return (
<label>
Set difficulty level:
<select>
<option value="setEasy">Easy</option>
<option value="setMedium">Medium</option>
<option value="setHard">Hard</option>
</select>
</label>
)
}

function GuessCounter() {
return(
<p>Number of guesses: </p>
)
}

const alphabet = [
"A", "B", "C", "D", "E", "F", "G", "H", "I",
"J", "K", "L", "M", "N", "O", "P", "Q", "R",
"S", "T", "U", "V", "W", "X", "Y", "Z"
];

function GameKeyboard() {
return(
<>
{alphabet}
</>
)
}

function App () {
return (
<div>
<>
<GameTitle />
<GamePrompt />
</>
<SetDifficulty />
<GuessCounter />
<GameKeyboard />
</div>

);
}

export default App;

I have tried re-creating an alphabet set-up (using `const` and displaying it) but when I try to implement a button component mapped to the alphabet elements I have not been able to figure out the correct syntax to allow it to be used as a <Button> component.
</details>
# 答案1
**得分**: 1
I think what you need is to use `map()` in the JSX. In this example, the `handleGuess()` function is passed into the `<AlphabetButtons>` component by its parent, but you could put it directly inside `<AlphabetButtons>` if you wanted to.
```javascript
function AlphabetButtons({ handeGuess }) {
return (
<div>
{alphabet.map((letter) => (
<button
onClick={() => {
handeGuess(letter);
}}
>
{letter}
</button>
))}
</div>
);
}

See here for a working example codesandbox.io

function AlphabetButtons({ handeGuess }) {
  return (
    <div>
      {alphabet.map((letter) => (
        <button
          onClick={() => {
            handeGuess(letter);
          }}
        >
          {letter}
        </button>
      ))}
    </div>
  );
}