web-dev-qa-db-ja.com

ReactでHTMLをインクルードするjsxの三項演算子

_this.state.message === 'failed'_の場合、reactを使用してこのエラーメッセージを表示しようとしています。しかし、なぜこの3項演算が機能しないのか、私には本当にわかりません。ここで何が間違っていますか？

_render() {
...
<div className="row">
return (this.state.message === 'failed') ? ( => {
     <div className="alert alert-danger" role="alert">
       Something went wrong
     </div>
})() : false;
}
</div>
_

現在、HTMLにreturn (this.state.message === 'failed') ? ( =>を表示しています

javascriptreactjsjsx
29
Modelesq

私は現在、reactでこのように3進数をフォーマットするのが好きです：

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

IIFEは、3項式と同様にレンダーステートメント内で使用できることは正しいです。通常のif .. elseステートメントは有効ですが、render関数のreturnステートメントには式のみを含めることができるため、他の場所でそれらを行う必要があります。

60
Nathan

三項の構文はcondition ? if : else。安全のために、3項の文全体を常に括弧で囲むことができます。 JSX要素も括弧で囲まれています。矢印関数の太い矢印には、常に2つの括弧（引数用）が先行しますが、いずれにしても関数は必要ありません。そのため、コードにいくつかの構文エラーがあります。実用的なソリューションは次のとおりです。

render() {
  return (this.state.message === 'failed' ? (
   <div className="alert alert-danger" role="alert">
     Something went wrong
   </div>
  ) : null);
}

編集：これが他のマークアップ内にある場合、再度renderを呼び出す必要はありません。補間には中括弧を使用できます。

render() {
  return (
    <div className="row">
      {this.state.message === 'failed' ? (
       <div className="alert alert-danger" role="alert">
         Something went wrong
       </div>
      ) : null}
    </div>
  );
}
5
Matis Lepik

これを試してください：

render () {
    return (
        <div className="row">
            { (this.state.message === 'failed') ?
                 <div className="alert alert-danger" role="alert">
                     Something went wrong
                 </div> :
                 <span> Everything in the world is fine </span> }
        </div>
    );
}
2
Elod Szopos

上記の答えが与えられれば、return()のrender()から次のような3項式を直接返すこともできます。

return condition? this.function1(): this.function2();

そして、function1（）およびfunction2（）内で、ビューを返すことができます。

1
Aayushi

三項内で変数を使用するには、ブラケットを再度使用します

render() {
  return(
    <div className='searchbox'>
     {this.state.var ? <div className='warning'>{this.state.var}</div> : ''}
    </div>
  )
}
1
Nikolay Podolnyy

@Nathanが受け入れた回答およびその他の同様の回答は正しいものです。ただし、?の結果と:の結果は、それぞれ単一の要素であるか、単一の要素でラップする必要があります（または、結果がnull | undefinedである場合があります。単一の要素として）。以下の例では、?の結果は機能しますが、:の結果は失敗します。

return (
  {this.state.message === 'failed' ? (
      <div>
        <row>three elements wrapped</row>
        <row>inside</row>
        <row>another element work.</row>
      </div>
    ) : (
      <row>html like</row>
      <row>haiku</row>
      <row>must follow rules of structure.</row>
    )
  }
)
0
Kenigmatic