Question

我正在从SharePoint中检索HTML字符串，需要解析和修改数据并构建一个react元素以显示在我的react应用程序中。

基本上，我以类似于以下格式的代码（作为字符串）返回给我：

"
<div>
    <div data-sp-canvasdataversion="1">This could be a header</div>
    <div data-sp-canvasdataversion="1"><img src="titleimage.jpg"></div>
    <div data-sp-canvasdataversion="1"><a href="pdfLink.pdf">This is a link to a PDF</a></div>
</div>
"

然后，我需要遍历子级并构建一个新的React元素，其中包含返回的某些部分和一些新的部分，例如

<div>
    <div data-sp-canvasdataversion="1">This could be a header</div>
    <div data-sp-canvasdataversion="1"><img src="titleimage.jpg"></div>
    <PDFViewer file={""pdfLink.pdf""}></PDFViewer> 
</div>

我最初使用的是非常危险的SetInnerHTML，它只是用来显示数据，但是现在我需要删除html的一部分，根据数据创建一个react元素，然后将新元素注入代码中。由于我现在正在尝试插入组件，因此无法使用香草html。

我能够通过将其转换为dom节点来遍历子级，但是我不知道如何将dom节点或元素用作React Element Child。

我尝试过：

let element = React.createElement('div', {}, HTMLString);

let node = document.createRange().createContextualFragment(HTMLString).firstChild;

let element = React.createElement('div', {}, node);

let node = document.createRange().createContextualFragment(HTMLString).firstChild;
let node2 = document.createElement("div");
node2.appendChild(node);
node2 = node2.firstElementChild as HTMLDivElement;

let element = React.createElement('div', {}, node2);

根据需要进行任何操作，并给我错误Objects are not valid as a React child (found: [object HTMLDivElement]).或类似的信息。

我需要的是类似的东西

let element = React.createElement('div'); 
let node = document.createRange().createContextualFragment(HTMLString).firstChild;

node.childNodes.forEach(child => {
    if(...//child IS NOT pdf)
        element.appendChild(child)
    else if(...//child IS pdf){
        ...
        element.appendChild(<PDFViewer file="linktopdf.pdf">)
    }
})

那么我希望能够在渲染中使用它

render {
    ...
    return(
        <div className="container">
            {element}
        </div>
    );
}

请告诉我这是否可行以及如何实现。我能想到的唯一可能的解决方案可能是将子元素保存为字符串，并使用dragonallySetInnerHTML生成所有元素，但我真的想摆脱使用危险地SetInnerHTML的习惯，尤其是那样。

Answer 1

我最终做了我不想要的事情，那就是危险地使用了SetInnerHTML。如果有人提出这个更好的解决方案，请随时分享。

async getArticleComponents(data: any) {
    if (!data)
        return null;

    let slides = []
    let node = document.createRange().createContextualFragment(data).firstChild;
    let children = node.childNodes;

    for (let i = 0; i < children.length; i++) {
        var element = (children[i] as HTMLDivElement);
        var controlElement = element.attributes.getNamedItem("data-sp-controldata");
        var jObj = controlElement ? JSON.parse(controlElement.value) : null;

        if (jObj.controlType === 3) {
            var childEle = element.firstElementChild;
            var webPartData = childEle.attributes.getNamedItem("data-sp-webpartdata");
            var wpJObj = webPartData ? JSON.parse(webPartData.value) : null;

            if (wpJObj.title == "File viewer") {
                let ext = (/.*\.(.*)/i).exec(wpJObj.properties.file)[1].toLowerCase();
                if (ext === "pdf") {
                    var pdf = await fetch(`/api/SharePoint/GetFile?url=${encodeURIComponent(`${wpJObj.serverProcessedContent.links.serverRelativeUrl}`)}`)
                    .then(res => res.text())
                    .then(pdf => pdf ? `data:application/pdf;base64,${pdf}` : null);

                    slides.push(<PDFViewer key={jObj.id} file={{ pdf, fileName: "test" } as IPdfMeta} />);
                }
            } else
                slides.push(<div key={jObj.id} dangerouslySetInnerHTML={{ __html: element.outerHTML }}></div>);
        }
        else if (jObj.controlType !== 0) {
            slides.push(<div key={jObj.id} dangerouslySetInnerHTML={{ __html: element.outerHTML }}></div>);
        }
    }
    return slides;
}

Answer 2

您可以尝试react-html-parser。

我可以从HTML字符串或dom节点/元素创建React元素吗

2 个答案: