为什么我们在 React js 中创建下拉菜单时使用 (null)？

Question

如果我们没有放 null 那么它会给出解析错误。

render() {
  return (
    <div  className="dropdown" style = {{background:"Red",width:"2000px"}} >
      <div className="button" onClick={this.showDropdownMenu}> User Info</div>
      {this.state.displayMenu ? (
        <ul>
         <li><a className="active" href="#Orders">Orders</a></li>
         <li><a href="#Payment Details">Payment Details</a></li>
         <li><a href="#Your Address">Your Address</a></li>
         <li><a href="#Your Profile">Profile</a></li>
         <li><a href="#Activity">Activity</a></li>
         <li><a href="#Setting">Setting</a></li>
         <li><a href="#Log Out">Log Out</a></li>
       </ul>
      ):
      (
        null
      )}
    </div>
  );
}

Answer 1

如果你不想添加 null 不要使用三元，你可以这样做：

 render() { 
    return (

      <div className="dropdown" style = {{background:"Red",width:"2000px"}} >
         <div className="button" onClick={this.showDropdownMenu}> User Info</div>

           { this.state.displayMenu && (
            <ul>
             <li><a className="active" href="#Orders">Orders</a></li>
             <li><a href="#Payment Details">Payment Details</a></li>
             <li><a href="#Your Address">Your Address</a></li>
             <li><a href="#Your Profile">Profile</a></li>
             <li><a href="#Activity">Activity</a></li>
             <li><a href="#Setting">Setting</a></li>
             <li><a href="#Log Out">Log Out</a></li>
            </ul>
            )}

      </div>
     );
   }