不呈现 else 块的条件语句答案

【问题标题】：Conditional statements not rendering else block不呈现 else 块的条件语句
【发布时间】：2021-01-21 09:16:38
【问题描述】：

在我的子组件Joke 中，我有以下条件渲染代码。支持 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:，所有情况下的答案都是空白。这种检查问题的条件逻辑是否正确？

【问题讨论】：

没有问题时props.question返回什么？
在没有问题的情况下根本不会显示任何内容。

标签： reactjs conditional-rendering

【解决方案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 && 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;
}

【讨论】：