未知块类型"code"，请在"serializers.types"属性中为其指定一个序列化程序

Question

我目前正在用Next.js和Sanity做我的博客网站。我试图添加自定义代码块在Sanity富文本使用代码输入，但遇到以下错误:

未知块类型"代码"，请在serializers.typesprop中为其指定序列化器

这是serializers.js

function BlockSerializer(props) {
var node = props.node,
serializers = props.serializers,
options = props.options,
isInline = props.isInline,
children = props.children;
var blockType = node._type;
var serializer = serializers.types[blockType];
if (!serializer) {
throw new Error("Unknown block type "".concat(blockType, "", please specify a serializer for it in the `serializers.types` prop"));
}
return h(serializer, {
node: node,
options: options,
isInline: isInline
}, children);
} // Low-level span serializer

有没有人可以帮助我如何在上面的代码中添加序列化器道具。提前谢谢。

Answer 1

由于您使用的类型超出默认值(即code)，因此您需要指定如何序列化它们。您的前端不知道如何处理code类型。在repo自述文件的用法部分有一个例子。

Answer 2

所以我遇到了同样的问题，而试图创建一个自定义代码类型为我的理智的内容与React便携式文本在AstroJs(所以上下文化这为您的Next.JS项目)。对于这个特定的错误:&"未知块类型&"&"代码&"，请在序列化器中为它指定一个序列化器。类型prop"

就像在前面的回答中所说的，问题是您试图用不同于默认类型的类型呈现内容。如果您想这样做，您需要使用序列化器。未知类型道具如下:

<PortableText
content={content}
projectId={projectId}
dataset={dataset}
serializers={{ unknownType: ({ node }) => {
if (node._type === "code") {
console.log(node);
return (
<div className=" border-blue-500">
<pre data-language={node.language} className="bg-black w-fit">
<code className="text-green-500">
{node.code}
</code>
</pre>
</div>
);
}
}
}}


/>

希望这对你有帮助!，从这里阅读更多信息(要处理未知类型，请查看文档的propTypes部分):https://github.com/sanity-io/block-content-to-react#usage