Question

我正在教自己做出反应并尝试制作一个计算器。有谁知道除了手动将所有按钮按如下所示之外，还有更好的方法列出所有按钮吗？

declare const def: () => void
export = def;

我想向每个按钮添加一个clickHandler，并使代码更干燥。我想创建一个名为ButtonRow的新jsx元素，该元素可以动态生成所需数量的按钮，因为我将在{{ 1}}，但以下操作无效。

          <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....

Answer 1

您绝对可以，但是语法有点差。在您的代码中，您声明了<Button />元素，但没有返回它：

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

您需要返回该元素（注意函数主体的()与您的{}：

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

// or

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

您可以使用地图自动创建jsx元素吗？

1 个答案: