从 React 服务器操作返回 JSX

您知道 Next.js 服务器操作可以返回 JSX 标记而不是原始 JSON 数据吗？

虽然文档中没有明确提及，但我对它的工作原理感到惊喜。

例子

我有一个使用服务器操作呈现用户列表的页面：

雷雷

UsersList 组件通过单击按钮加载用户：

雷雷

演示：

现在我更改服务器操作以返回带有渲染用户的 JSX:

雷雷

在 UsersList 组件中只渲染服务器操作响应：

雷雷

在浏览器中一切都以相同的方式工作！

错误处理注意事项

如果服务器操作抛出错误怎么办？当它返回 JSON 数据时，我们可以在操作中捕获该错误并以自己的格式返回它，例如：

雷雷

返回 JSX 时，我们可以让错误抛出并用客户端上最近的错误边界捕获它。根据 React 文档，服务器操作调用在

之外。组件应该被包装到 Transition 中以进行正确的错误处理。
UsersList组件的最终代码：
雷雷

此外，我利用 isPending 标志在加载用户时显示消息。

演示：

希望对您有帮助。
感谢您的阅读并祝您编码愉快！ ❤️

以上是从 React 服务器操作返回 JSX的详细内容。更多信息请关注PHP中文网其他相关文章！