if語句與我所期望的完全相反

Question

我確定這很容易，但出於某種原因，我無法弄清楚爲什麼我會得到相反的結果。如果我使用下面的代碼，則返回第二個結果。如果我將其更改爲！= null，則返回第一個結果。

import React from "react"; 

export default class ListButtons extends React.Component{ 

    render(){ 
     console.log(this.props.before); // null 
     if(this.props.before == null){ 
      return (
       <div> 
        <ul className="pagination"> 
         <li> 
          <a href="#">Next</a> 
         </li> 
        </ul> 
       </div> 
      ) 
     }else{ 
      return (
       <div> 
        <ul className="pagination"> 
         <li> 
          <a href="#">Previous</a> 
         </li> 
         <li> 
          <a href="#">Next</a> 
         </li> 
        </ul> 
       </div> 
      ) 
     } 

    } 
} 

Answer 1

試試這個：

import React from "react"; 

export default class ListButtons extends React.Component{ 
    render(){ 
      const content = !!this.props.before ? (
       <li> 
         <a href="#">Previous</a> 
       </li> 
       <li> 
         <a href="#">Next</a> 
       </li> 
      ) : (
       <li> 
         <a href="#">Next</a> 
       </li> 
      ) 

      return (
        <div> 
          <ul className="pagination"> 
            {content} 
          </ul> 
        </div> 
      ) 
    } 
} 

---

如果不工作，也可能是與地方/如何this.props.before設置錯誤。