React 组件中 return () 大括号、<> 尖括号、div 元素的区别

()

语法工具，用于换行时避免错误，不影响渲染结果。

export default function PostItem(post: Post) {
    return (
        <div>
            <p>{post.title}</p>
        </div>
    )
}

# 以下代码会报错 或者 不渲染

export default function PostItem(post: Post) {
    return
        <div>
            <p>{post.title}</p>
        </div>
}

<>

Fragment：用于包裹多个元素，且不会额外生成DOM节点，适合减少DOM层级。

div

直接返回div等标签。

export default function PostItem(post: Post) {
    return <div>
            <p>{post.title}</p>
        </div>
}