Ist es möglich, if...else...-Anweisungen in React-Renderfunktionen zu verwenden?
P粉760675452
P粉760675452 2023-08-23 18:27:14
0
2
461
<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粉760675452
P粉760675452

Antworte allen(2)
P粉288069045

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

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

不完全一样,但有解决方法。 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>
  );
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage