如何设置显示或不显示内容的条件？

Question

如果 other:[]，我怎样才能不显示我的 InfoIcon。事实上，当我想在 Table 中显示我的所有数据时，我有一个空的其他成员（逻辑因为我没有其他人）但是显示了图标。如果other:[]请问我怎样才能删除这个图标？

{
    "participation": [
        {           
            "family": [
                {
                    "name": "Huston",
                    "age": "23"
                }
            ],
            "other": [
                {
                    "name": "Luk",
                    "age": "65"
                },
            ]
        }, 
        {           
            "family": [
                {
                    "name": "Laurence",
                    "age": "5"
                }
            ],
            "other": []
        }
    ]
}

export default function App() {
    const data = useMemo(() => [
        {
            Header: 'Other',
            accessor: (row) => row.other,
            Cell: (props) => (
                <div>
                    {props.value !== [] ? props.value.map(({ name }) => name).join(", ") : ''}
                    <InfoIcon position="right" message={props.value !== [] ? props.value.map((o) => (
                        <span key={o.name}>
                            <b>{o.name}</b>
                            <p>Age: {o.age}</p>
                        </span>
                    ))
                        : ''
                    } />
                </div >
            )
        },
        ...
    ])
}

Answer 1

如果我理解你的问题，你可以在调用 InfoIcon 之前检查 props.value.length 是否大于 0，如下所示：


export default function App() {
    const data = useMemo(() => [
        {
            Header: 'Other',
            accessor: (row) => row.other,
            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>Age: {o.age}</p>
                        </span>
                    ))
                        : ''
                    } />}
                </div >
            )
        },
        ...
    ])
}

如何设置显示或不显示内容的条件？

How do I put a condition to display or not a content with react?

reactjs