Можете ли вы создавать элементы JSX автоматически с картой?

Question

Я учу себя реагировать и пытаюсь сделать калькулятор.Кто-нибудь знает, есть ли лучший способ перечислить все кнопки, кроме того, чтобы вручную поместить их все, как показано ниже?

          <div className="row">
            <Button clickHandler={this.handleClick}>7</Button>
            <Button clickHandler={this.handleClick}>8</Button>
            <Button>9</Button>
            <Button>÷</Button>
          </div>
          <div className="row">
            <Button>5</Button>
            <Button>6</Button>
            <Button>7</Button>
            <Button>x</Button>
          </div>
  etc....

Я хотел добавить clickHandler для каждой кнопки и сделать мой код более СУХИМ IЯ хотел создать новый элемент jsx с именем ButtonRow, который динамически создает столько кнопок, сколько мне нужно, потому что я передам массив символов в props.vals, но следующее не работает.

const ButtonRow = (props) => (<div className="row" 
  children={
    props.vals.map(val => {
    <Button children={val} clickHandler={props.clickHandler} />
    })
  }
></div>)

Expected an assignment or function call and instead saw an expression.

Answer 1

Вы можете, но ваш синтаксис немного не в порядке.В своем коде вы объявляете элемент <Button />, но не возвращаете его:

props.vals.map(val => {
  <Button ... />
})

Вам необходимо вернуть элемент (обратите внимание на () против вашего {} для тела функции:

props.vals.map(val => (
  <Button ... />
))

// or

props.vals.map(val => {
  return <Button ... />
})