其他條件語句中的React.js條件語句存在問題

Question

目的是在“ sortBy”等於特定值的情況下有條件地顯示元素。

我可以做一個條件語句，但是當我在第一個條件語句中添加另一個條件語句時

異常：調用節點模塊失敗，並顯示以下錯誤：TypeError：“ LastName”不是一個函數

這是我的代碼：

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”是否等於“ LastName”，然后檢查“ sortDirection”是“ Ascending”還是“ Descending”並相應地顯示一個字形。

Answer 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>
}