ReactJS 和 JSX 条件 IF

Question

我正在尝试检查 JSX，如果我的价格变量大于 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>
  );
};

我发现的 IF/ELSE 语句的每个示例都尝试使用 render() 函数，但此时我已经在渲染中，并且 IF 运算符使应用程序崩溃。

返回的错误是：

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

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

Answer 1

您可以在此处执行一些操作，具体取决于您的情况。

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

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

您也可以将其放入单独的函数中并以这种方式调用它，如果条件和数据更复杂（并且可重复使用），这是首选

renderPriceDiv(price: { raw: number }, id: { raw: number }): JSX.Element 
{

    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>+" $"
          )

    }

    // else
    return <div />;
}

那么您的 render 函数将类似于

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

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

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

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

Answer 2

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

的自定义函数中

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

        return <span />
    }

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

或者使用ternary operators在返回的块内表达条件

 const Component = () =>{
     return(
         <>
            { condition ? <span /> : <div /> }
         </>
     )
 }