是否可以在React渲染函数中使用if ... else ...语句？

Question

基本上,我有一个反应组件,它的render()功能体如下:(这是我理想的,这意味着它目前不起作用)

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            if (this.props.hasImage) <MyImage />
            else <OtherElement/>
        </div>
    )
}

Answer 1

不完全是这样,但有一些解决方法.React关于条件渲染的文档中有一节你应该看看.以下是使用内联if-else可以执行的操作的示例.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

你也可以在渲染函数中处理它,但在返回jsx之前.

if (isLoggedIn) {
  button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
  button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
  <div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
  </div>
);

值得一提的是ZekeDroid在评论中提到的内容.如果您只是检查条件并且不想呈现不符合的特定代码,则可以使用&& operator.

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );

Answer 2

条件渲染的四种方式

\n

（在函数组件的 return 语句或类组件的渲染函数的 return 语句中）

\n

\xc2\xa0

\n

三元运算符

\n

\xc2\xa0

\n

return (\n    <div>     \n        {\n            'a'==='a' ? <p>Hi</p> : <p>Bye</p>\n        } \n    </div>\n)\n

\n

\n

注意：只有当条件'a'==='a'为真时， <p>Hi</p>才会在屏幕上呈现。否则， <p>Bye</p> 将呈现在屏幕上。

\n

\n

\xc2\xa0

\n

逻辑运算符

\n

\xc2\xa0

\n

和&&

\n

return (\n    <div>     \n        {\n            'a'==='a' && <p>Hi</p>\n        } \n    </div>\n)\n

\n

\n

注意：只有当条件'a'==='a'为真时， <p>Hi</p>才会在屏幕上呈现。

\n

\n

\xc2\xa0

\n

或者||

\n

export default function LogicalOperatorExample({name, labelText}) {\n    \n  return (\n    <div>       \n         {labelText || name}      \n    </div>\n  )\n}\n

\n

\n

注意：如果 labelText和name两个道具都传递到此组件中，则将labelText在屏幕中渲染。但如果只有其中一个（name或labelText）作为 prop 传递，那么传递的 prop 将在屏幕上渲染。

\n

\n

\xc2\xa0

\n

如果，否则，否则如果

\n

\xc2\xa0

\n

return ( \n        <div>     \n            {\n                (() => {\n                    if('a'==='b') {\n                            return (\n                                <p>Hi</p>\n                            )\n                        } else if ('b'==='b') {\n                            return (\n                            <p>Hello</p>\n                            )\n                        } else {\n                            return (\n                                <p>Bye</p>\n                            )\n                        }\n                })()  \n            }  \n        </div>  \n    )\n

\n

\n

注意：必须使用匿名函数（也需要立即调用该函数）

\n

\n

\xc2\xa0

\n

switch语句

\n

\xc2\xa0

\n

return ( \n    <div>     \n        {\n            (() => {\n                switch(true) {\n                        \n                    case('a'==='b'): {\n                            return (\n                                <p>Hello</p>\n                            )\n                        }\n                    break;\n                        \n                    case('a'==='a'): {\n                        return (\n                            <p>Hi</p>\n                        )\n                    }\n                    break;\n                    \n                    default: {\n                            return (\n                                <p>Bye</p>\n                            )\n                        }\n                    break;\n                    }\n            })()  \n        }  \n    </div>  \n)\n

\n

\n

注意：必须使用匿名函数（也需要立即调用该函数）

\n

\n

Answer 3

仅当：

{condition1 && 
(<div> condition1 true </div>)}

对于 if 和 else：

{condition1 ? 
(<div> condition1 true </div>)
:(<div> condition1 false </div>)}

对于 if、else if 和 else：

{condition1 ? 
(<div>condition1 true</div>)
:(condition2) ? 
(<div>condition2 true</div>)
:(<div>both conditions false</div>)}

Answer 4

实际上，有一种方法可以准确地执行OP的要求。只需渲染并调用匿名函数，如下所示：

render () {
  return (
    <div>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </div>
  )
}

Answer 5

您可以使用conditional类似if,的语句渲染任何内容else：

 render() {
    const price = this.state.price;
    let comp;

    if (price) {

      comp = <h1>Block for getting started with {this.state.price}</h1>

    } else {

      comp = <h1>Block for getting started.</h1>

    }

    return (
      <div>
        <div className="gettingStart">
          {comp}
        </div>
      </div>
    );
  }

Answer 6

类型一： If陈述式

{props.hasImage &&

  <MyImage />

}

类型 2： If else语句样式

   {props.hasImage ?

      <MyImage /> :

      <OtherElement/>

    }

Answer 7

if else 结构的简写在 JSX 中按预期工作

this.props.hasImage ? <MyImage /> : <SomeotherElement>

您可以在DevNacho的这篇博文中找到其他选项，但更常见的是使用简写。如果您需要更大的 if 子句，您应该编写一个返回组件 A或组件 B的函数。

例如：

this.setState({overlayHovered: true});

renderComponentByState({overlayHovered}){
    if(overlayHovered) {
        return <OverlayHoveredComponent />
    }else{
        return <OverlayNotHoveredComponent />
    }
}

如果您将其作为参数提供，则可以从 this.state 解构您的overlayHovered。然后在 render() 方法中执行该函数：

renderComponentByState(this.state)

Answer 8

您应该记住TERNARY 运算符

：

所以你的代码会是这样的，

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            { 
               this.props.hasImage ?  // if has image
               <MyImage />            // return My image tag 
               :
               <OtherElement/>        // otherwise return other element  

             }
        </div>
    )
}

Answer 9

如果您需要多个条件，那么您可以尝试一下

https://www.npmjs.com/package/react-if-elseif-else-render

import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render';

class Example extends Component {

  render() {
    var i = 3; // it will render '<p>Else</p>'
    return (
      <If condition={i == 1}>
        <Then>
          <p>Then: 1</p>
        </Then>
        <ElseIf condition={i == 2}>
          <p>ElseIf: 2</p>
        </ElseIf>
        <Else>
          <p>Else</p>
        </Else>
      </If>
    );
  }
}

Answer 10

如果您有 2 个不同的依赖项，您还可以在条件运算符内使用条件（三元）运算符。

{
(launch_success)
  ?
  <span className="bg-green-100">
    Success
  </span>
  :
  (upcoming)
    ?
    <span className="bg-teal-100">
      Upcoming
    </span>
    :
    <span className="bg-red-100">
      Failed
    </span>
}