如何总结两个 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>
)
);

你可以用几种方法来做，但我认为这种方法是最简洁的，因为你将求和逻辑排除在返回之外，并且如果你想对其他东西求和，该函数是可重用的。