ReactJS和JSX条件IF

我试图在JSX中检查我的价格变量是否大于0，如果大于0，则显示价格框。。。我似乎不能理解正确的语法

export default ({ result }) => {
  const id = result.id || {};
  const price = result.price || {};
  return (
    <Col xs={12} md={4}>
      <li className="sui-result product">
        <a
          id="offre_row_3"
          href={"https://www.cliiic.com/offre.php?id=" + id.raw}
          className="col-xs-4"
          ng-repeat="forfait in forfaits"
          style={{ padding: "0px", textDecoration: "none" }}
        >
    {/*MORE STUFF*/}

              {if(price.raw > 0) {
              return (
                <div
                  id={"price_" + id.raw}
                  style={{
                    clear: "both",
                    margin: "5px",
                    float: "right",
                    height: "27px",
                    lineHeight: "27px",
                    fontSize: "15px",
                    textAlign: "center",
                    fontWeight: "bold",
                    color: "#FFF",
                    backgroundColor: "rgba(0,0,0,0.5)",
                    position: "relative",
                    display: "block",
                    top: "99px",
                    padding: "0 10px",
                    width: "97px"
                  }}
                >
                <span className="currency">{price.raw}</span>+" $"
              );}}

    {/*MORE STUFF*/}
        </a>
      </li>
    </Col>
  );
};

导出默认值（{result}）=>{
const id=result.id | |{}；
const price=result.price | |{}；
返回(


);
};

我发现的IF/ELSE语句的每个示例都尝试使用render（）函数，但此时我已经在渲染中，IF操作符使应用程序崩溃

返回的错误为：

SyntaxError
/src/ResultView.js: Unexpected token (96:15)

  94 |               </div>
  95 | 
> 96 |               {if(price.raw > 0) {
     |                ^
  97 |               return (
  98 |                 <div

SyntaxError
/src/ResultView.js:意外标记（96:15）
94 |               
95 | 
>96 |{if（price.raw>0）{
|                ^
97 |返回(
98 |您不能在
jsx
表达式中使用
if/else
语句。或者将逻辑提取到返回
jsx

const Component = () =>{
    const renderStuff = () =>{
        if(condition)
            return <div />

        return <span />
    }

    return (
        <>
            { renderStuff() }
        </>
    )
}

不能在
jsx
表达式中使用
if/else
语句。或者将逻辑提取到返回
jsx

const Component = () =>{
    const renderStuff = () =>{
        if(condition)
            return <div />

        return <span />
    }

    return (
        <>
            { renderStuff() }
        </>
    )
}

根据你的情况，你可以在这里做一些事情

使用React，渲染时不显式使用
if
，而是使用三元检查

return <div>{price.raw > 0 ? <your-elements> : ''}</div>;

@colburton提到的第三个选项是调用函数并将其设置为变量，因此render看起来像

render() {
    const id = result.id || {};
    const price = result.price || {};

    return (
        <div>
            {this.renderPriceDiv(price, id)}
        </div>
    );
}

renderPriceDiv(price: { raw: number }, id: { raw: number }): JSX.Element 
{
    return (
        <div
          id={"price_" + id.raw}
          style={{
            clear: "both",
            margin: "5px",
            float: "right",
            height: "27px",
            lineHeight: "27px",
            fontSize: "15px",
            textAlign: "center",
            fontWeight: "bold",
            color: "#FFF",
            backgroundColor: "rgba(0,0,0,0.5)",
            position: "relative",
            display: "block",
            top: "99px",
            padding: "0 10px",
            width: "97px"
          }}
        >
        <span className="currency">{price.raw}</span>+" $"
      );
}

render() {
    const id = result.id || {};
    const price = result.price || {};

    const priceDiv = price.raw > 0 ? renderPriceDiv(price, id) : <div />;

    return (
        <div>
            {priceDiv}
        </div>
    );
}

renderPriceDiv（price:{raw:number}，id:{raw:number}）：JSX.Element
{
返回(
{price.raw}+“$”
);
}
render（）{
const id=result.id | |{}；
const price=result.price | |{}；
const priceDiv=price.raw>0？renderPriceDiv（price，id）：；
返回(
{priceDiv}
);
}
根据您的情况，您可以在这里做一些事情

使用React，渲染时不显式使用
if
，而是使用三元检查

return <div>{price.raw > 0 ? <your-elements> : ''}</div>;

@colburton提到的第三个选项是调用函数并将其设置为变量，因此render看起来像

render() {
    const id = result.id || {};
    const price = result.price || {};

    return (
        <div>
            {this.renderPriceDiv(price, id)}
        </div>
    );
}

renderPriceDiv(price: { raw: number }, id: { raw: number }): JSX.Element 
{
    return (
        <div
          id={"price_" + id.raw}
          style={{
            clear: "both",
            margin: "5px",
            float: "right",
            height: "27px",
            lineHeight: "27px",
            fontSize: "15px",
            textAlign: "center",
            fontWeight: "bold",
            color: "#FFF",
            backgroundColor: "rgba(0,0,0,0.5)",
            position: "relative",
            display: "block",
            top: "99px",
            padding: "0 10px",
            width: "97px"
          }}
        >
        <span className="currency">{price.raw}</span>+" $"
      );
}

render() {
    const id = result.id || {};
    const price = result.price || {};

    const priceDiv = price.raw > 0 ? renderPriceDiv(price, id) : <div />;

    return (
        <div>
            {priceDiv}
        </div>
    );
}

renderPriceDiv（price:{raw:number}，id:{raw:number}）：JSX.Element
{
返回(
{price.raw}+“$”
);
}
render（）{
const id=result.id | |{}；
const price=result.price | |{}；
const priceDiv=price.raw>0？renderPriceDiv（price，id）：；
返回(
{priceDiv}
);
}
第三个选项：保存到变量并将其输出。您也可以阅读以获得更完整的理解。第三个选项：保存到变量并将其输出。您也可以阅读以获得更完整的理解。谢谢，这篇文章解释得很好！谢谢，这篇文章解释得很好！