Reactjs Syntax React：不带包装的代码

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

---

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

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

从React 16.2+，您可以使用以下片段：

还有一种使用空标记的速记语法：

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>
    </>
))}

---

.

的简短语法只是空标记

@Zanetti，因此请根据示例调整您的代码。我只找到了第二种方法，其他方法在我的代码中不起作用。我已更新了第一个示例，返回数组，只是删除了括号，还添加了速记语法。

{ 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>
])}

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>
    </>
))}