如果我的表格单元格中没有打印动物,我怎么做才能获得破折号(-).根据我的try ,如果我有animals:[]个,我的手机仍然是空的:

export default function Animals() {
    const data = useMemo(() => [
        {
            Header: 'Animals',
            accessor: (row) => row.animals,
            Cell: (props) => (
                <div>
                    {props.value !== [] ? props.value.map(({ name }) => name).join(", ") : ''}
                    {props.value.length > 0 && <InfoIcon position="right" message={props.value !== [] ? props.value.map((o) => (
                        <span key={o.name}>
                            <b>{o.name}</b>
                            <p>Type: {o.type}</p>
                            <p>Price: {o.price}</p>
                        </span>
                    ))
                        : ''
                    } />}
                </div >
            )
        }
....
}

推荐答案

使用内联三元条件逻辑

export default function Animals() {
    const data = useMemo(() => [
        {
            Header: 'Animals',
            accessor: (row) => row.animals,
            Cell: (props) => (
{ props.value !== [] && props.value.length > 0 ?              
<div>
                    {props.value !== [] ? props.value.map(({ name }) => name).join(", ") : ''}
                    {props.value.length > 0 && <InfoIcon position="right" message={props.value !== [] ? props.value.map((o) => (
                        <span key={o.name}>
                            <b>{o.name}</b>
                            <p>Type: {o.type}</p>
                            <p>Price: {o.price}</p>
                        </span>
                    ))
                        : ''
                    } />}
                </div > : <div>-</div> }
            )
        }
....
}

Javascript相关问答推荐

优化Google Sheet脚本以将下拉菜单和公式添加到多行

为什么123[';toString';].long返回1?

从页面到应用程序(NextJS):REST.STATUS不是一个函数

未加载css colored颜色 ,无法将div设置为可见和不可见

将对象推送到数组会导致复制

如何在Java脚本中对列表中的特定元素进行排序?

使用自动识别发出信号(&Q)

React:防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

JavaScript&;Reaction-如何避免在不使用字典/对象的情况下出现地狱?

在没有任何悬停或其他触发的情况下连续交换图像

Firefox的绝对定位没有达到预期效果

如何从Reaction-Redux中来自API调用的数据中筛选值

:host::ng-Deep不将样式应用于material 复选框

在采购unpept-visalizations.js时遇到问题

Vue3合成API.来自本地存储的对象始终返回UNDEFINED

React rebuild c不会触发rerender

无法将产品添加到Collection 夹屏幕并获取此TypeError:undefined不是函数?

改进了正则表达式的性能

$.fileName在OS X和Adobe Illustrator的脚本中不起作用

VUE 3数据未恢复