内联三元条件运算符答案

【问题标题】：Inline Ternary Conditional Operator内联三元条件运算符
【发布时间】：2020-07-21 07:04:36
【问题描述】：

我正在尝试使用三元运算来渲染组件。如果 this.state.info 和 this.state.shortdef 的长度大于 0，我想显示一个组件。编写该代码的正确方法是什么，为什么？这是我的代码：

render (){

  return (

      <div>
        <div>
        {!(this.state.info && this.state.shortdef.length > 0) ? <addBook /> }
        </div>
      </div>
  );
  }

【问题讨论】：

{this.state.info && this.state.shortdef.length > 0 && <addBook />}
另外，React 组件应该总是以大写字母开头。让它<AddBook />

标签： reactjs jsx ternary

【解决方案1】：

{(this.state.info.length > 0 && this.state.shortdef.length > 0 && <addBook />}

如果您没有第二个返回选项，则不需要三元运算符。如果前面的语句为真，&& 将渲染组件。

【讨论】：

【解决方案2】：

在这种情况下你不需要三元，你可以使用&& 操作符，但是 lil 建议你的代码，组件应该总是以大写开头，所以<AddBook /> 我会亲自将条件移动到常量，以减少渲染体积庞大。

render (){
  const hasNoBooks = !(this.state.info && this.state.shortdef.length > 0)

  return (
    <div>
      <div>
        { hasNoBooks && <AddBook /> }
      </div>
    </div>
  );
}

【讨论】：

【解决方案3】：

如果您想在特定条件下显示组件，请按此操作：

{(this.state.info && this.state.shortdef.length > 0) && <addBook />}

如果您想在特定条件下显示一个组件，而在条件失败时显示另一个组件，请使用 ternary 运算符：

{(this.state.info && this.state.shortdef.length > 0) ? <addBook /> : <SomeOtherComponent />}

【讨论】：

嗨@Rohan，这很有帮助。由于某种原因，即使我将它列为导入，该组件也没有注册。是否还有其他原因可能无法注册？
您可以编辑问题并将代码粘贴到您遇到此问题的位置吗？