Heim  >  Fragen und Antworten  >  Hauptteil

Ist es möglich, if...else...-Anweisungen in React-Renderfunktionen zu verwenden?

<p>Grundsätzlich habe ich eine Reaktionskomponente, deren <code>render()</code> wie folgt aussieht: (Dies ist mein Ideal, was bedeutet, dass es derzeit nicht funktioniert)< /p> ; <pre class="brush:js;toolbar:false;">render(){ zurückkehren ( <div> <Element1/> <Element2/> // Hinweis: Nur Logik, Code funktioniert hier nicht if (this.props.hasImage) <ElementWithImage/> sonst <ElementWithoutImage/> </div> ) } </pre> <p><br /></p>
P粉760675452P粉760675452445 Tage vor450

Antworte allen(2)Ich werde antworten

  • P粉288069045

    P粉2880690452023-08-24 16:44:43

    实际上有一种方法可以完全满足OP的要求。只需渲染并调用匿名函数,如下所示:

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

    Antwort
    0
  • P粉176980522

    P粉1769805222023-08-24 15:10:18

    不完全一样,但有解决方法。 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 在评论中提出的内容。如果您只是检查条件并且不想呈现不符合条件的特定代码段,则可以使用 && 运算符

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

    Antwort
    0
  • StornierenAntwort