0

我在构建一个简单的计算器时尝试了 javascript map 方法。

我为计算器的每一行使用一个列表，并将其映射到一个表格单元格和其中的一个主要反应按钮。

然而，我在浏览器中得到了奇怪的结果。

我在组件中的代码如下，我截取了输出。在此处输入图像描述

import React, { Component } from 'react'
import {Button} from 'primereact/button'

class Calculator extends Component {

  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() {
    const values1 = ["7", "8", "9", "/"]
    const values2 = ["4", "5", "6", "x"]
    const values3 = ["1", "2", "3", "-"]
    const values4 = ["0", ".", "+", "="]
    const valuesList1 = values1.map(value => <td><Button>{value}</Button></td>)
    const valuesList2 = values2.map(value => <td><Button>{value}</Button></td>)
    const valuesList3 = values3.map(value => <td><Button>{value}</Button></td>)
    const valuesList4 = values4.map(value => <td><Button>{value}</Button></td>)

    return (
      <div className="Middle">
        <section className="InputContainer">
          <table className="Keys">
            <tbody>
              <tr>
                {valuesList1}
              </tr>
              <tr>
                {valuesList2}
              </tr>
              <tr>
                {valuesList3}
              </tr>
              <tr>
                {valuesList4}
              </tr>
            </tbody>
          </table>
        </section>
      </div>
    );
  }

}

export default Calculator;

4

1 回答 1

2

似乎问题可能来自<Button/>组件，因为它呈现了似乎在其中的附加文本className。

我看到您正在为按钮使用 PrimeReact 库，根据他们的文档label，您应该通过道具输入按钮的文本。

尝试将您的代码更改为以下内容：

import React, { Component } from 'react'
import {Button} from 'primereact/button'

class Calculator extends Component {

  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() {
    const values1 = ["7", "8", "9", "/"]
    const values2 = ["4", "5", "6", "x"]
    const values3 = ["1", "2", "3", "-"]
    const values4 = ["0", ".", "+", "="]
    const valuesList1 = values1.map(value => <td><Button label={value} /></td>)
    const valuesList2 = values2.map(value => <td><Button label={value} /></td>)
    const valuesList3 = values3.map(value => <td><Button label={value} /></td>)
    const valuesList4 = values4.map(value => <td><Button label={value} /></td>)

    return (
      <div className="Middle">
        <section className="InputContainer">
          <table className="Keys">
            <tbody>
              <tr>
                {valuesList1}
              </tr>
              <tr>
                {valuesList2}
              </tr>
              <tr>
                {valuesList3}
              </tr>
              <tr>
                {valuesList4}
              </tr>
            </tbody>
          </table>
        </section>
      </div>
    );
  }

}

export default Calculator;

希望这可以帮助

于 2020-01-20T19:21:22.243 回答