2017-04-18 126 views
0

的意圖是有條件地顯示內容,如果「sortBy」等於一個特定的值內..問題與React.js條件語句另一個條件語句

我可以做一個單一的條件語句,但是當我添加另一個內部與

Exception: Call to Node module failed with error: TypeError: "LastName" is not a function

這裏的第一個錯誤,這是我的代碼:

export const TableHeaders = (props) => { 
    const { handleSubmit } = props 

    const { sortBy, sortDirection} = props 

    return (
     <div> 
     <div className="row"> 
      <div className="col-md-1" style={headingCellStyle}>Client #</div> 
      <div className="col-md-6" style={headingCellStyle}> 
      Name/Address 
      {sortBy === 'LastName' (
       <span> 
       {sortDirection === 'Descending' ? (
        <span className='glyphicon glyphicon-sort-by-attributes'></span> 
        ) : (
        <span className='glyphicon glyphicon-sort-by-attributes-alt'></span> 
        ) 
       } 
       </span> 
      )} 

      {console.log(`Sort Direction ${sortDirection}`)} 
      </div> 
      <div className="col-md-2" style={headingCellStyle}>Phone</div> 
      <div className="col-md-1" style={headingCellStyle}>Jobs</div> 
      <div className="col-md-2" style={headingCellStyle}>Actions</div> 
     </div> 
     </div> 
    ) 
    } 
    TableHeaders.propTypes = { 
    onSubmit: PropTypes.func.isRequired, 
    } 

    const TableHeadersForm = reduxForm({ 
    form: 'SearchClients', 
    })(TableHeaders) 

    export default TableHeadersForm 

我怎麼在這裏構建一個雙條件語句?

我發現只有「sortDirection」條件語句才起作用,但在其周圍添加「sortBy」條件語句失敗。

我第一打算以檢查是否「sortby」等於說「姓」,如果是再檢查「sortDirection」可以是「升序」或「降序」,並顯示相應的一個glyphon ..

+1

您忘記在'sortBy ==='LastName''後面加''' – micnic

+0

@micnic並且錯過了':...'的錯誤情況'' – Li357

+0

您必須使用三元運算符,該條件然後有JSX。括號被視爲函數調用,字符串不是函數。 – Li357

回答

1

你錯過了?還有false箱子第一個條件,你必須把它寫這樣的:

{sortBy === 'LastName' ? 
    <span> 
    { 
     sortDirection === 'Descending' ? 
      <span className='glyphicon glyphicon-sort-by-attributes'></span> 
     : 
      <span className='glyphicon glyphicon-sort-by-attributes-alt'></span> 
    } 
    </span> 
: 
    null //or some element 
} 

如果你不想在false情況下render任何你可以把它寫這樣也:

{sortBy === 'LastName' && <span> 
    { 
     sortDirection === 'Descending' ? 
      <span className='glyphicon glyphicon-sort-by-attributes'></span> 
     : 
      <span className='glyphicon glyphicon-sort-by-attributes-alt'></span> 
    } 
    </span> 
}