条件に基づいて適切なビューをレンダリングするにはどうすればいいですか？

Question

私は、検索ボタンに基づいて適切なビューをレンダリングするコンポーネントを持っています。今は動作しますが、検索対象のユーザーが見つからない場合は、メッセージを画面に表示したいと考えていました。私は理想的には、私のコンポーネントの状態がnullであり、検索が失敗した場合、 "ごめんなさいユーザーが見つかりません"の場合にコンポーネントをレンダリングしたいと考えています。

私は

let allOrNo = this.props.view; 
let renderMe; 
if(allOrNo === 'true') { 
      renderMe= renderData; 
} else { 
      renderMe = renderUser; 
} 

return (
     <div> 
      {renderMe} 
     </div> 
    ) 

を使用しています現時点でたrenderDataは、データベース内のすべてのユーザーをマップし、renderUserは、検索ユーザ名に基づいてユーザーにマッピングします。 this.props.name === 'blank'のときに、失敗した検索ケースを処理するか、デフォルトのランディングページを返すために、switch文を作成するか、この条件文に追加するにはどうすればよいですか？

Answer 1

<div> 
    {this.props.view && 
     renderData //this will happen if this.props.view is truthy 
    } 
</div> 

では& &オペレータは、前の文がtrueの場合にのみレンダリングするために、次のJSXを伝え反応します。何かをレンダリングするかしないかは、通常は最適なソリューションです。あなただけ行う可能性があり、 {this.props.view ? (do this if true) : (do this if false) }

は、第三のケースを追加するには：

<div> 
    {this.props.view ? renderData : renderUser} 
</div> 

基本的にこう述べています。しかし、あなたは基本的に2つのビューを切り替えるにしたいあなたのケースでは、おそらく三項演算子を望みますこれは：

return (
     <div> 
      {this.props.view ? renderData : renderUser} 
      {this.props.name === 'blank' && 
       Sorry, user not found. 
      } 
     </div> 
    )