Как я могу превратить это, если заявление в троичной (javascript) - PullRequest
0 голосов
/ 24 марта 2020

Я написал это выражение if, которое возвращает элементы 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 />
        </>
      )
    }

1 Ответ

1 голос
/ 24 марта 2020

Я не рекомендую это, потому что это намного менее читабельно. Кроме того, чтобы использовать условный возврат, вы должны вернуть что-то. Таким образом, вам понадобится окончательное утверждение «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
...