Javascript 如何将React组件属性值四舍五入到小数点后2位？

我尝试使用{val}.toFixed（2），但由于我必须返回该值，所以它只返回值和字符串“.toFixed（2）”。我还尝试了{val.toFixed（2）}，但它抛出了一个错误，因为“val.toFixed（2）”不是一个函数。它位于统计部分

（我目前正在研究赫尔辛基大学的PultStand） 我该怎么做

import React, { useState } from 'react'
import ReactDOM from 'react-dom'


const Button = ({ onClick, text }) => (
  <button onClick={onClick}>
    {text}
  </button>
)

const Statistic = ({text, val}) => {
  
  return (
  <table>
  <tbody>
    <tr>
      <td>{text}</td>
      <td> {val}</td>
    </tr>
    </tbody>
  </table>
  )
}
const Statistics = ({total, good, neutral, bad}) => {
  
return (
  <div>
<Statistic text = "good" val = {good} />
<Statistic text = "neutral" val = {neutral} />
<Statistic text = "bad" val = {bad} />
<Statistic text = "total" val = {total} />
<Statistic text = "average" val = {(good - bad) / total} />
<Statistic text = "positive" val = {good / total + "%"} />
</div>
)
}

const Feedback = ({total, good, neutral, bad}) => {
if (total === 0) {
return (
  <div> No feedback given. </div>
  )
} 
return (
  <Statistics total = {total} good = {good} bad = {bad} neutral = {neutral}/>
)
}

const App = () => {
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)
  const [total, setTotal] = useState(0)
  
  const addGood = () => {
    setGood(good + 1)
    setTotal(total + 1)
  }

  const addBad = () => {
    setBad(bad + 1)
    setTotal(total + 1)
  }

  const addNeutral = () => {
    setNeutral(neutral + 1)
    setTotal(total + 1)
  }

  return (
    <div>
    <h1>Give your Feedback!</h1>
    <Button onClick={addGood} text="Good!" />
    <Button onClick={addNeutral} text="Neutral" />
    <Button onClick={addBad} text="Bad" />
<h1>Statistics</h1>
<Feedback total = {total} good = {good} bad = {bad} neutral = {neutral} />
    </div>
    
  )
}


ReactDOM.render(<App />,
  document.getElementById('root')
  )

import React，{useState}来自“React”
从“react dom”导入react dom
常量按钮=（{onClick，text}）=>(
{text}
)
常量统计=（{text，val}）=>{
返回(
{text}
{val}
)
}
常量统计=（{总计、良好、中性、不良}）=>{
返回(
)
}
常量反馈=（{总计、良好、中性、不良}）=>{
如果（总计===0）{
返回(
没有反馈。
)
} 
返回(
)
}
常量应用=（）=>{
常数[good，setGood]=useState（0）
常数[neutral，setNeutral]=useState（0）
const[bad，setBad]=useState（0）
常量[total，setTotal]=useState（0）
常量addGood=（）=>{
设置良好（良好+1）
setTotal（总计+1）
}
常量addBad=（）=>{
挫折（坏+1）
setTotal（总计+1）
}
常量addNeutral=（）=>{
设置空档（空档+1）
setTotal（总计+1）
}
返回(
给出你的反馈！
统计
)
}
ReactDOM.render（，
document.getElementById（'root'））
)

---

谢谢大家!

您应该将

val

作为道具从

Statistics

组件本身以任何格式传递。

Statistic

组件应该只是一个哑组件。这样，您甚至不需要处理该类型

尝试：

const Statistics=（{total，good，neutral，bad}）=>{
返回(
)
}

当您像这样传递值时，

val={good/total+“%”

，它会转换为字符串，这就是为什么您不能在val上使用toFixed

您可以在传递道具时使用

toFixed

或者，您可以单独传递单元，并在“val”上使用toFixed

const Statistic=（{text，val，unit}）=>{
返回(
{text}
{parseFloat（val）.toFixed（2）}+unit}
)
}
//......

您将收到错误，因为

.toFixed

是数字的一部分，

val={good/total+“%”

将传递@Rajesh所说的内容。另外，只有当值存在时才应该调用方法以防止错误，类似这样：{val&&val.toFixed（2）}@maten，我不认为这是一个笼统的语句，这取决于组件。如果一个组件总是希望有一个道具出现，那就由父组件来处理它。@Rajesh我会加上这个作为答案。只需在

Statistics

中执行

val.toFixed（2）

而不是

Statistic

@cbr您是对的，我只检查了有问题的组件，但是我可以看到该值在父级中初始化为0，因此我的注释无效

const Statistics = ({total, good, neutral, bad}) => {

return (
 <div>
   <Statistic text = "good" val = {good.toFixed(2)} />
   <Statistic text = "neutral" val = {neutral.toFixed(2)} />
   <Statistic text = "bad" val = {bad.toFixed(2)} />
   <Statistic text = "total" val = {total.toFixed(2)} />
   <Statistic text = "average" val = {((good - bad) / total).toFixed(2)} />
   <Statistic text = "positive" val = {(good / total).toFixed(2) + "%"} />
 </div>
 )
}