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

Question

我尝试使用 {val}.toFixed(2) 但由于我必须返回该值，所以它所做的只是返回该值和字符串“.toFixed(2)”。 我也试过 {val.toFixed(2)} 但它会引发错误，因为“val.toFixed(2)”不是 function。 它位于统计组件

（我目前正在赫尔辛基大学学习 FullStack Open）

我该怎么做呢？

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')
  )

谢谢！

Answer 1

您应该从Statistics组件本身以任何格式将val作为 prop 传递。 Statistic组件应该只是一个哑组件。 这样，您甚至不需要处理类型。

尝试：

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>
 )
}

Answer 2

当您像这样传递值时val = {good / total + "%"} ，由于类型强制，它会转换为字符串，这就是您无法在 val 上使用 toFixed 的原因

您可以在传递道具时使用toFixed

<Statistic text = "positive" val = {(good / total).toFixed(2) + "%"} />

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

 const Statistic = ({text, val, unit}) => { return ( <table> <tbody> <tr> <td>{text}</td> <td> {parseFloat(val).toFixed(2)} + unit}</td> </tr> </tbody> </table> ) } //...... <Statistic text = "average" val = {(good - bad) / total} unit="" /> <Statistic text = "positive" val = {(good / total)} unit="%" />