Блог

Главная - Вопросы по программированию - Условные операторы, не отображающие блок else

Условные операторы, не отображающие блок else

#reactjs #conditional-rendering

#reactjs #условный рендеринг

Вопрос:

В моем дочернем компоненте Joke у меня есть следующий код условного отображения. Большинство шуток в файле backing JSON содержат как вопрос, так и кульминационный момент, но у одной шутки есть только кульминационный момент. Поэтому, если есть вопрос, я хочу, чтобы отображались как вопрос, так и ответ, в противном случае я хочу отображать только кульминационный момент и в малиновом цвете:

 function Joke(props) {
    if (props.question) {
    return (
        <div>
            <h3>Question: {props.question}</h3>
            <h3>Answer: {props.punchline}</h3>
            <hr />
        </div>
    )}
    else {
        return (
            <div>
                <h3 style={{color:"crimson"}}>{props.punchline}</h3>
                <hr />
            </div>
        )}
    }

export default Joke

То, что на самом деле выводится сейчас, просто Question: and whatever the question is и Answer: с пустым ответом для всех случаев. Правильна ли эта условная логика проверки вопроса?

Комментарии:

1. что возвращает props.question, когда нет вопроса?

2. Вообще ничего не отображается для случая, когда нет вопросов.

Ответ №1:

Попробуйте приведенный ниже код

 function Joke(props) {
    return (
        <>
            {props?.question ? 
                          (<div>
                             <h3>Question: {props.question}</h3>
                             <h3>Answer: {props.punchline}</h3>
                             <hr />
                          </div>)
                          : (<div>
                               <h3 style={{color:"crimson"}}>{props.punchline}</h3>
                               <hr />
                             </div>)
                        }
            </>
       )
    }

Ответ №2:

Я бы предпочел сделать это таким образом.

Применяйте строгие проверки и сохраняйте условие по умолчанию, а также в случае, если ни одно из условий не будет выполнено.

 function Joke(props) {
  let content = <div>None of the condition matched!</div>;

  if (props.question amp;amp; props.punchline) {
    content = (
      <div>
        <h3>Question: {props.question}</h3>
        <h3>Answer: {props.punchline}</h3>
        <hr />
      </div>
    )
  } else if (props.punchline) {
    content = (
      <div>
        <h3>Answer: {props.punchline}</h3>
        <hr />
      </div>
    )
  }

  return content;
}