如何将此 if 语句转换为三元 (javascript)

Question

我已经写了这个 if 语句 returns jsx 元素（反应）并且我是这个完整的三元（不仅仅是第二个范围中的那个：

jsx:

if (pageState === 'ready') {
      return (
        <>
          <Particles className="particles" params={params} />
          <Navigation isSignedIn={isSignedIn} onRouteChange={onRouteChange} />
          {route === 'home'
            ? <>
              <Rank name={this.state.user.name} entries={this.state.user.entries} />
              <LinkForm inputChange={onInputChange} onSubmit={onSubmit} />
              <ImageBox box={box} imageSrc={imageUrl} />
            </>
            : (
              route === 'signin'
                ? <SignIn loadUser={loadUser} onRouteChange={onRouteChange} />
                : <SignUp loadUser={loadUser} onRouteChange={onRouteChange} />
            )
          }
        </>
      )
    } else if (pageState === 'loading') {
      return (
        <>
          <Particles className="particles" params={params} />
          <Loader />
        </>
      )
    }

Answer 1

我不推荐这个，因为它的可读性要差得多。此外，为了使用条件 return，您必须 return 一些东西。因此，您需要最后的 'else' 声明或继续您当前的方法。

return (pageState === 'ready') ?
  (
    <>
      <Particles className="particles" params={params} />
      <Navigation isSignedIn={isSignedIn} onRouteChange={onRouteChange} />
      {route === 'home'
        ? <>
          <Rank name={this.state.user.name} entries={this.state.user.entries} />
          <LinkForm inputChange={onInputChange} onSubmit={onSubmit} />
          <ImageBox box={box} imageSrc={imageUrl} />
        </>
        : (
          route === 'signin'
            ? <SignIn loadUser={loadUser} onRouteChange={onRouteChange} />
            : <SignUp loadUser={loadUser} onRouteChange={onRouteChange} />
        )
      }
    </>
  )
: (pageState === 'loading') ?
  (
    <>
      <Particles className="particles" params={params} />
      <Loader />
    </>
  )
: // You need a final 'else' condition

如何将此 if 语句转换为三元 (javascript)

How can I turn this if statement into a ternary (javascript)

javascript

if-statement

ternary

jsx

reactjs