javascript - 嵌套了几个三元运算符

Question

当我{this.state.items && this.state.items.length?在<div className =" container ">. 当我消除这种极端情况时{this.state.items && this.state.items.length? : Components : <Preloader />，一切正常。很多嵌套，我不知道问题出在哪里。我认为这是一种极端情况。而不是整个页面上的主要组件，我想在整个页面上呈现预加载器

class Items extends Component {

  render () {
    return (     
      <div className="container">
      {this.state.items && this.state.items.length ?
        <div className="items">
          <div className="item">
            <span>
              <i></i>
            </span>
            <h4></h4>
            <div className="select">
              <button></button>
            </div>
          </div>
          <div className="section">
            <input/>
            <span>
              <i></i>
            </span>
          </div>
          <div>
              'AAAAAAA'
          </div>
          <div className="scroll"> 
            {this.state.items.length === 0 && this.state.status === 1 ?
              <div className="array">
                <p>AAAAAA</p>
              </div>
              :
              this.state.items && this.state.items.length ?
                this.state.items.map((todo, index) => 
                  <Item
                    key={item.id}
                    index={index}
                  />
                )
                :
                <div className="preloader">

                </div>        
            }
          </div>
        </div>
        <div className="another"> 
          <Component1

          />     
          <Component2

          /> 
        </div>
        :
        <Preloader />
      </div>
    )
  }
}

标签： javascriptreactjs

Answer 1

您}在最后一个 div 之前缺少一个来关闭第一个三元组，并且您缺少第一个三元组第一个表达式的包装标签（我使用了 a React.Fragment）。下面的代码片段在语法上应该是正确的。我建议你重构你的代码。

class Items extends Component {
  render() {
    return (
      <div className="container">
        {this.state.items && this.state.items.length ? (
          <React.Fragment>
            <div className="items">
              <div className="item">
                <span>
                  <i></i>
                </span>
                <h4></h4>
                <div className="select">
                  <button></button>
                </div>
              </div>
              <div className="section">
                <input />
                <span>
                  <i></i>
                </span>
              </div>
              <div>'AAAAAAA'</div>
              <div className="scroll">
                {this.state.items.length === 0 && this.state.status === 1 ? (
                  <div className="array">
                    <p>AAAAAA</p>
                  </div>
                ) : this.state.items && this.state.items.length ? (
                  this.state.items.map((todo, index) => (
                    <Item key={item.id} index={index} />
                  ))
                ) : (
                  <div className="preloader"></div>
                )}
              </div>
            </div>
            <div className="another">
              <Component1 />
              <Component2 />
            </div>
          </React.Fragment>
        ) : (
          <Preloader />
        )}
      </div>
    );
  }
}