如何使用PrimeReact的Button组件？

Question

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

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

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

我在组件中的代码如下所示，我已经截图了输出。enter image description here

​

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;

​

Answer 1

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

我看到您使用的是按钮的PrimeReact库，根据它们的documentation，您应该通过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;

希望这能有所帮助