Question

基本上，我有一个反应组件，它的render(){ return ( <div> <Element1/> <Element2/> // note: code does not work here if (this.props.hasImage) <MyImage /> else <OtherElement/> </div> ) }函数体如下:(这是我理想的一个，这意味着它目前不起作用）

@SpringBootApplication
@ImportResource("classpath:Beans.xml")
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

Answer 1

不完全是这样，但有一些解决方法。 React's docs中有关于条件渲染的部分，您应该看一下。以下是使用内联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

实际上有一种方法可以准确地执行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 3

类型1： If语句样式

{props.hasImage &&

  <MyImage />

}

类型2： If else语句样式

   {props.hasImage ?

      <MyImage /> :

      <OtherElement/>

    }

Answer 4

我使用了三元运算符，对我来说很好用。


>       {item.lotNum == null ? ('PDF'):(item.lotNum)}

Answer 5

尝试使用Switch大小写或三元运算符

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // updated code works here
            {(() => {
                        switch (this.props.hasImage) {
                            case (this.props.hasImage):
                                return <MyImage />;
                            default:
                                return (
                                   <OtherElement/>; 
                                );
                        }
                    })()}
        </div>
    )
}

这对我有用，应该对其他人也有用。尝试Ternary Operator

Answer 6

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

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

Answer 7

如果希望条件显示元素，则可以使用类似这样的东西。

renderButton() {
    if (this.state.loading) {
        return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
    }

    return (
        <Button onPress={this.onButtonPress.bind(this)}>
            Log In
        </Button>
    );
}

然后在渲染函数中调用帮助方法。

<View style={styles.buttonStyle}>
      {this.renderButton()}
</View>

或者您可以在return内部使用另一种条件。

{this.props.hasImage ? <element1> : <element2>}

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

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 10

您可以使用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 11

如果您需要多个条件，那么您可以试试这个

the kuberetes Ingress documentation

Host:

Answer 12

我可能来得太晚了。但我希望这会对某人有所帮助。首先将这两个元素分开。

mAuth.signInWithCredential(authCredential)
    .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
        @Override
        public void onComplete(@NonNull Task<AuthResult> task) {
            // Account exists with different credential. Assume the developer wants to
            // continue and link new credential to existing account.
            if (!task.isSuccessful() &&
                task.getException() instanceof FirebaseAuthUserCollisionException) {
                FirebaseAuthUserCollisionException exception =
                        (FirebaseAuthUserCollisionException)task.getException();
                if (exception.getErrorCode() == 
                    ERROR_ACCOUNT_EXISTS_WITH_DIFFERENT_CREDENTIAL) {
                    // Lookup existing account’s provider ID.
                    mAuth.fetchProvidersForEmail(existingAcctEmail)
                       .addOnCompleteListener(new OnCompleteListener<ProviderQueryResult> {
                          @Override
                          public void onComplete(@NonNull Task<ProviderQueryResult> task) {
                            if (task.isSuccessful()) {
                              if (task.getResult().getProviders().contains(
                                      EmailAuthProvider.PROVIDER_ID)) {
                                // Password account already exists with the same email.
                                // Ask user to provide password associated with that account.
                                ... 
                                // Sign in with email and the provided password.
                                // If this was a Google account, call signInWithCredential instead.
                                mAuth.signInWithEmailAndPassword(existingAcctEmail, password)
                                  addOnCompleteListener(new OnCompleteListener<AuthResult> {
                                    @Override
                                    public void onComplete(@NonNull Task<AuthResult> task) {
                                      if (task.isSuccessful()) { 
                                        // Link initial credential to existing account.
                                        mAuth.getCurrentUser().linkWithCredential(authCredential);
                                      }
                                    }
                                  });
                              }
                            }
                          }
                        });
            }
        }
    });

然后你可以使用if else语句从render函数调用这些函数。

renderLogout(){
<div>
   <LogoutButton onClick={this.handleLogoutClick} />
<div>
}

renderLogin(){
<div>
   <LoginButton onClick={this.handleLoginClick} />
<div>
}

这对我有用。：）

Answer 13

如果你想用If，else if，然后用这个方法

id

Answer 14

很多很好的答案，但是我还没有看到使用对象映射到不同的视图

const LOGS = {
  info: <Info />,
  warning: <Warning />,
  error: <Error />,
};
 
const Notification = ({ status }) => <div>{LOGS[status]}</div>

Answer 15

没有一个答案提到短路方法

{this.props.hasImage && <MyImage />}

当然，如果您想在 else 逻辑上呈现某些内容，则不能使用它。我是在 react by example

上了解到的

在更深入的扫描中，我确实看到了@ZekeDroid 的评论，但我将其作为答案放弃，因为它可能有用。

Answer 16

我发现一个我认为比 if-else 更好的解决方案。而是有 2 个 return 语句。见示例：

render() {
    const isLoggedIn = this.state.isLoggedIn;

    if (isLoggedIn) {
        return <LogoutButton onClick={this.handleLogoutClick} />
    }

    // This will never occur if the user is logged in as the function is returned before that.
    return <LoginButton onClick={this.handleLoginClick} />
}

这比在 return 语句中使用 if-else 或三元运算符更简洁。

Answer 17

下面的代码，你可以使用 if 条件对侧返回作出反应

                                    {(() => {if (true) {return ( <div><Form>
                                        <Form.Group as={Row} style={{ marginLeft: '15px', marginRight: '15px', marginBlock: '0px' }} >
                                            <Form.Label className="summary-smmdfont" style={{ flex: '1 0 auto', marginBlock: '0px' }}>   uyt</Form.Label>
                                            <Form.Label className="summary-smmdfont"style={{ textAlignLast: 'Right', flex: '1 0 auto', marginBlock: '0px' }}>
                                                09</Form.Label>
                                        </Form.Group>
                                        </Form>

                                    </div>);
                    }})()}

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

17 个答案: