2017-04-18 120 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> 
}