如何使用javascript / react正确解析内容丰富的嵌入内容

时间:2019-09-10 18:25:06

标签: gatsby contentful

嗨,我正在尝试从内容丰富的内容中解析我的内容,但这对我来说就像一场噩梦,嵌套元素太深了,我在这里错过了什么吗? 我正在尝试将embed元素解析为丰富的component元素。在我的嵌入元素中,我有一幅图像+另一幅富文本。 将富文本转换为富文本似乎会创建过多的节点,有没有一种方法可以轻松获取所有内容,目前,我只能显示ùy图片。 任何建议将是非常有益的。 我为我的英语感到抱歉,这不是我的主要语言。 来自法国的你好。

这是后台设置的照片 https://imgur.com/a/bybgIo9

    let intermediaire = "";
    let paragraph = ""
    let htmlObject = document.createElement('div');

    const options = {
        renderNode: {
            [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
            [BLOCKS.EMBEDDED_ENTRY]: (node, children) => {

                const fields = node.data.target.fields;
                //console.log(fields)
                //console.log(fields.image['fr-FR'].fields.file['fr-FR'].url);
                switch (node.data.target.sys.contentType.sys.id) {
                    case "sectionImageText":
                        //console.log(fields.texteADroite['fr-FR'].content);
                        fields.texteADroite['fr-FR'].content.forEach(element => {
                            if(element.nodeType == "paragraph"){
                                intermediaire = "<p>"+element.content[0].value+"</p>"
                                paragraph = intermediaire + paragraph
                            }
                        })

                        return <div>
                            <div className="col-gauche">
                                <img src={fields.image['fr-FR'].fields.file['fr-FR'].url} />
                            </div>
                            <div className="col-droite">
                                {paragraph}
                            </div>
                        </div>
                    default:
                        return <div>Fallback Element</div>
                }
            }
        },
        renderText: text => text.replace('!', '?')

0 个答案:

没有答案