Реагировать, как я могу отобразить правильный вид, основанный на условии?

Question

У меня есть компонент, который отображает правильный вид на основе кнопки поиска. Сейчас это работает, но я также хотел отобразить, чтобы отобразить сообщение, если поиск пользователя не найден. В идеале я бы хотел отобразить компонент, если состояние моих компонентов равно null и «извините, пользователь не найден», если поиск завершился неудачно.

На данный момент я использую

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

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

RenderData отображает всех пользователей в базе данных и карт renderUser на пользователя на основе имени пользователя поиска. Как я могу построить оператор switch или добавить к этому условному оператору, чтобы обрабатывать неудавшийся случай поиска или возвращать целевую страницу по умолчанию, когда this.props.name === 'blank'?

Answer 1

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

В РЕАКТ & & оператор говорит следующее JSX оказывать только если предыдущее утверждение верно. Это, как правило, лучшее решение, если вы хотите что-то сделать или нет. Тем не менее, в вашем случае, когда вы хотите, чтобы в основном переключаться между двумя точками зрения, вы, вероятно, хотите тройной оператор:

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

Который в основном говорит: {this.props.view ? (do this if true) : (do this if false) }

Чтобы добавить третий случай, вы можете просто сделать это:

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