Question

如何在不包装div的情况下重写代码？

{ allItems.map(item => (
    <div>
        { item === 2 &&
        <li className="page-item">
            <span className="page-link">...</span>
        </li>
        }
        <li className="page-item">
            <span className="page-link">{item}</span>
        </li>
    </div>
))}

Answer 1

在React 16+中，您可以使用Fragments：

在第一个版本中，片段是通过返回数组来完成的：

{ allItems.map(item => [
    { item === 2 &&
    <li className="page-item">
        <span className="page-link">...</span>
    </li>
    }
    <li className="page-item">
        <span className="page-link">{item}</span>
    </li>
])}

在React 16.2+中，您可以按以下方式使用片段：

const Fragment = React.Fragment

{ allItems.map(item => (
    <Fragment>
        { item === 2 &&
        <li className="page-item">
            <span className="page-link">...</span>
        </li>
        }
        <li className="page-item">
            <span className="page-link">{item}</span>
        </li>
    </Fragment>
))}

还有一个速记语法，使用一个空标记：

const Fragment = React.Fragment

{ allItems.map(item => (
    <>
        { item === 2 &&
        <li className="page-item">
            <span className="page-link">...</span>
        </li>
        }
        <li className="page-item">
            <span className="page-link">{item}</span>
        </li>
    </>
))}

Credits。

Answer 2

<React.Fragment>的短语法只是空标记； <> </>

语法React：不包装<div>的代码

2 个答案: