React条件渲染出现Unexpected token语法错误，请求排查解决

你的语法错误出在JSX条件渲染的代码块里，核心问题有两个：

• 分号的错误使用：displayPosts(posts);里的分号会让JSX解析器认为这个表达式已经结束，后面的<input>元素就变成了独立的、不符合语法的内容，触发Unexpected token错误。
• 多个元素未被包裹：在JSX的条件表达式中，如果你要返回多个元素（这里是displayPosts返回的列表 + 按钮），必须将它们包裹在一个根容器内（比如React Fragment或者普通div）。

修正后的代码片段： #

{hasPostsResolved && posts?.length > 0 && (
    <>
        {displayPosts(posts)}
        <input type="button" className="wp-element-button" value="Load More" />
    </>
)}

关键说明： #

• 用括号()包裹整个要返回的内容块，让JSX解析器正确识别这是一个完整的表达式。
• 用<>（React Fragment）包裹两个元素，满足JSX“单根元素”的要求，同时不会在DOM中增加额外的节点。
• 把displayPosts(posts)放在{}里，因为这是一个返回JSX的函数调用，需要在JSX中用表达式语法插入。

你的displayPosts函数本身没有问题，它会返回一个由<article>组成的数组，React可以直接渲染数组类型的JSX。

内容的提问来源于stack exchange，提问作者leemon