javascript - 如何将此 if 语句转换为三元（javascript）

Question

我写了这个返回 jsx 元素（反应）的 if 语句，我是完整的三元（不仅是第二个范围内的那个：

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 />
        </>
      )
    }

标签： javascriptreactjsif-statementjsxternary

Answer 1

我不推荐这个，因为它的可读性要差得多。此外，为了使用条件返回，您必须返回一些东西。所以你需要最后的“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