时间戳

首页 > 解决方案 > 语法 React：没有包装的代码

reactjs - 语法 React：没有包装的代码

问题描述

如何在不包装的情况下重写我的代码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>
))}

标签： reactjs

解决方案

在 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+ 开始，您可以按如下方式使用 Fragments：

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

学分。

推荐阅读