如何總結兩個 React 道具？

Question

我想要做的是總結兩個包含應用程序從數據庫中獲取的值的 React props

這是道具片段

const GPBBatting = (props) => (
  <tr>
    <td>{props.player.Player}</td>
    <td>{props.player.G_GS.substring(0, 1)}</td>
    <td>{props.player.AB}</td>
    <td>{props.player.R}</td>
    <td>{props.player.H}</td>
    <td>{props.player.H2}</td>
    <td>{props.player.H3}</td>
    <td>{props.player.HR}</td>
    <td>{props.player.RBI}</td>
    <td>{props.player.SB_ATT}</td>
    <td>{props.player.BB}</td>
    <td>{props.player.SO}</td>
    <td>{props.player.BA}</td>
    <td>{props.player.OBP}</td>
    <td>{props.player.SLG}</td>

    <<<<<<I want the sum of OBP + SLG values here>>>>>

    <td>{props.player.TB}</td>
    <td>{props.player.SH}</td>
    <td>{props.player.SF}</td>
  </tr>
);

在此鏈接中是完整代碼： https : //www.paste.org/111710

Answer 1

這不就是<td>{props.player.OBP + props.player.SLG}</td>嗎？ 或者如果它們不是數字， <td>{parseInt(props.player.OBP) + parseInt(props.player.SLG)}</td> 。

我建議您使用諸如learnxinyminutes或Mozilla 的優秀 JS入門之類的東西來復習您的 JS。

Answer 2

我不確定您的設置究竟是什么，但如果 GPBBAtting 是您的組件，您可以執行以下操作：

const GPBBatting = (props) => (

const getPlayerSum = (a, b) => {
      const sumValue = a + b;
      return sumValue
}

return(
  <tr>
    <td>{props.player.Player}</td>
    <td>{props.player.G_GS.substring(0, 1)}</td>
    <td>{props.player.AB}</td>
    <td>{props.player.R}</td>
    <td>{props.player.H}</td>
    <td>{props.player.H2}</td>
    <td>{props.player.H3}</td>
    <td>{props.player.HR}</td>
    <td>{props.player.RBI}</td>
    <td>{props.player.SB_ATT}</td>
    <td>{props.player.BB}</td>
    <td>{props.player.SO}</td>
    <td>{props.player.BA}</td>
    <td>{props.player.OBP}</td>
    <td>{props.player.SLG}</td>

    {getPlayerSum(props.player.SLG, props.player.OBP)} // call a sum function here and pass the values you want to sum

    <td>{props.player.TB}</td>
    <td>{props.player.SH}</td>
    <td>{props.player.SF}</td>
  </tr>
)
);

你可以用幾種方法來做，但我認為這種方法是最簡潔的，因為你將求和邏輯排除在返回之外，並且如果你想對其他東西求和，該函數是可重用的。