其他条件语句中的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>
}