如何使用PrimeReact的Button组件？

Question

我正在尝试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;

Answer 1

问题似乎可能来自<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;

希望这有帮助