为什么这个代码块没有在我的 JSX 中执行？

Question

我正在制作一个简单的 JSX，returns 基于从后端传入的变量值的不同文本。虽然卡片在 {irr} 之前都可以正确显示，但带有 ifs 的代码块根本就没有执行。构建过程或浏览器中没有错误，并且记录了 console.log 语句中的 none。

我以前成功做过几次，甚至从项目的另一个（工作）部分复制粘贴了一些代码作为这一点的基础，而且它非常简单所以我不确定从哪里开始尝试弄清楚我在这里做错了什么。

有什么想法吗？

        <Card style={{ width: "72rem" }} className="mt-3 mr-2 ml-2">
          <Card.Body>
            <Card.Title className={classes.card}>{cardData.company}</Card.Title>
            <Card.Text className={classes.card}>
              {cardData.company} was bought 5 years ago for 
              €{purchasePrice}.
              At this time, the equity contribution of the PE owner was
              €{totalCF} as the deal was leveraged with a
              €{debtFinancing} term loan. Post-transaction, the PE firm received the intererim Free Cash Flow to Equity plus the current selling price minus the loan repayment. The total cash flows for the PE firm resulted in a  
              {irr}
              {(() => {
                console.log("In");
                if (irr > 0.15) {
                  console.log("A");
                    return (
                      <span>
                      Given the IRR is above the 15% target, the PE client is likely to deepen the relationship with the advisory team. In other words, {advisorName}  has done a good job.
                      </span>
                    );
                  } else if (irr <= 0.1) {
                  console.log("B");
                    return (
                      <span>
                      Given the IRR is way below the 15% target, the PE client might stop working with its advisors,  {advisorName}.
                      </span>
                    );
                  } else {
                  console.log("C");
                    return (
                      <span>
                      Given the IRR is below the 15% target, the relationship between the PE client and its advisor,  {advisorName}, has deteriorated.
                      </span>
                    );
                  }
              })}
            </Card.Text>
          </Card.Body>
        </Card>

Answer 1

通过这种方式，您只需在 jsx 中引入函数，您还应该使用括号执行。但我想建议您在此块之外定义另一个函数，以降低认知复杂性。

https://en.wikipedia.org/wiki/Immediately_invoked_function_expression

例如

    {(()=>{
        // Your if blocks
    })()}

粘贴它。

<Card style={{ width: "72rem" }} className="mt-3 mr-2 ml-2">
<Card.Body>
  <Card.Title className={classes.card}>{cardData.company}</Card.Title>
  <Card.Text className={classes.card}>
    {cardData.company} was bought 5 years ago for 
    €{purchasePrice}.
    At this time, the equity contribution of the PE owner was
    €{totalCF} as the deal was leveraged with a
    €{debtFinancing} term loan. Post-transaction, the PE firm received the intererim Free Cash Flow to Equity plus the current selling price minus the loan repayment. The total cash flows for the PE firm resulted in a  
    {irr}
    {(() => {
      console.log("In");
      if (irr > 0.15) {
        console.log("A");
          return (
            <span>
            Given the IRR is above the 15% target, the PE client is likely to deepen the relationship with the advisory team. In other words, {advisorName}  has done a good job.
            </span>
          );
        } else if (irr <= 0.1) {
        console.log("B");
          return (
            <span>
            Given the IRR is way below the 15% target, the PE client might stop working with its advisors,  {advisorName}.
            </span>
          );
        } else {
        console.log("C");
          return (
            <span>
            Given the IRR is below the 15% target, the relationship between the PE client and its advisor,  {advisorName}, has deteriorated.
            </span>
          );
        }
    })()}
  </Card.Text>
</Card.Body>
</Card>

为什么这个代码块没有在我的 JSX 中执行？

Why is this code block not executing in my JSX?

jsx

reactjs