javascript - 用 React.js 组件替换部分 html 字符串并渲染(没有 dangerouslySetInnerHTML)

Question

我正在使用从 WordPress API 获取数据的 Node.js/React.js 客户端，我遇到了相当棘手的问题。但希望你能帮助我! :)

所以我从 WordPress API(单页内容)中获得了这种数据作为字符串:

"<h1>Curabitur turpis.</h1>
<p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Praesent blandit laoreet nibh. Aenean commodo ligula eget dolor. Donec vitae sapien ut libero venenatis faucibus.</p>
[gravityform id=&#8221;42&#8243; title=&#8221;true&#8221; description=&#8221;true&#8221;]
<h2>Donec vitae orci sed</h2>
<p><strong>Suspendisse faucibus</strong>, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi.</p>
<blockquote><p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Aliquam lobortis. In turpis.</p></blockquote>
<ul><li>item</li><li>item</li><li>item</li></ul>"

我需要做的是替换简码 [gravityform id=”42″ title=”true” description=”true”] react 组件 <GravityForm />使用想要的事件处理程序等，并按原样呈现其他 html 元素。

我正在做这样的替换:

export const replaceGravityFormShortcode = html => {
    if(!html) return html;
    const gravityFormRegexp = /\[gravityform id=.([0-9]{1,}).*?\]/g;
    return replace(
        html,
        gravityFormRegexp,
        function (fullMatch, id) {
            return <GravityForm key={id} formId={id} />;
        }
    );
};

所以用 React 组件替换 [shortcodes] 已经涵盖了，但之后的 html 数据如下所示:
[
0:"<h1>Curabitur turpis.</h1><p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Praesent blandit laoreet nibh. Aenean commodo ligula eget dolor. Donec vitae sapien ut libero venenatis faucibus.</p>"
1:Object (GravityForm-component)
2:"<h2>Donec vitae orci sed</h2><p><strong>Suspendisse faucibus</strong>, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi.</p><blockquote><p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Aliquam lobortis. In turpis.</p></blockquote><ul><li>item</li><li>item</li><li>item</li></ul>"
]


很明显，这不会在 render() 内工作因为

1. 如果我只渲染该数据，表单工作正常，但默认情况下所有 html 字符串都被转义
2. 如果我使用 dangerouslySetInnerHTML它看起来像这样( <GravityForm /> 是 [object Object] ) dangerouslySetInnerHTML-screenshot

那么这个问题有什么合理的解决办法吗？或者应该从一些不同的 Angular 来处理这个问题？

感谢您的帮助!

---

编辑

@joy 是的，您的解决方案是将 html 字符串更改为 React Components，但它仍然没有解决 html 转义问题。所以我仍然有类似(screenshot)的输出

<h1>Curabitur turpis.</h1><p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Praesent blandit laoreet nibh. Aenean commodo ligula eget dolor. Donec vitae sapien ut libero venenatis faucibus.</p>
<h2>Donec vitae orci sed</h2><p><strong>Suspendisse faucibus</strong>, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi.</p><blockquote><p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Aliquam lobortis. In turpis.</p></blockquote><ul><li>item</li><li>item</li><li>item</li></ul>

但是否有可能在不从字符串中逐一解析 html 元素的情况下呈现该 html？

---

编辑 2(解决方案 - 有点)

所以我终于找到了这个案例的~工作~解决方案。

1. 我使用 react-html-parser从数据字符串中解析 html 元素
2. 那么数据就像(对象是 React 元素):
[
0:Object
1:Object
2:"[gravityform id=”42″ title=”true” description=”true”]"
3:Object
4:Object
5:Object
6:Object
]

3. 最后循环那个数据replaceGravityFormShortcodesFromArrayOfObjects(arrayOfObjects) , 替换 [gravityform id=”42″ title=”true” description=”true”]与 <GravityForm />然后只渲染数据

---

export const replaceGravityFormShortcodesFromArrayOfObjects =(dataArray) => {
    if(!dataArray) return dataArray;
    const gravityFormRegexp = /\[gravityform id=.([0-9]{1,}).*?\]/g;
    forEach(dataArray, (value, index) => {
        if(typeof value === 'string'){
            const temp = replace(
                value,
                gravityFormRegexp,
                function (fullMatch, id) {
                    return <GravityForm key={id} formId={id} />;
                }
            );
            if(temp.length === 1 && isObject(temp[0])){
                dataArray = [
                    ...dataArray.slice(0, index),
                    temp[0],
                    ...dataArray.slice(index + 1),
                ];
            }
        }
    }
    return dataArray;
};

但是 这仅在 html 结构是一层深时有效。如果"[gravityform id=”42″ title=”true” description=”true”]"在 React 元素内部 props.children ，它变得更加棘手，我还没有找到可行的解决方案。

Answer 1

我遇到了完全相同的问题，这是我的解决方案:

定义字符串:

const s = `<h1>Curabitur turpis.</h1>
<p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Praesent blandit laoreet nibh. Aenean commodo ligula eget dolor. Donec vitae sapien ut libero venenatis faucibus.</p>
[gravityform id=&#8221;42&#8243; title=&#8221;true&#8221; description=&#8221;true&#8221;]
<h2>Donec vitae orci sed</h2>
<p><strong>Suspendisse faucibus</strong>, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi.</p>
<blockquote><p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Aliquam lobortis. In turpis.</p></blockquote>
<ul><li>item</li><li>item</li><li>item</li></ul>`

用[*]分割字符串:

const normalText = s.split(/\[[\s\S]+\]/g)

提取ID:

let ids = [];
const re = /\[gravityform id=.*([0-9]{1,}).*\]/g;
s.replace(re, (fullMatch, id) => {
  ids.push(id)
})

现在数组 normalText 和 ids 有我们想要连接的内容。简单地连接它们:

const output = normalText.map((text, index) => {
  <div>
    {text}
    <GravityForm key={ids[index]} formId={ids[index]} />
  </div>
})

// Then put `output` in the `render` function

您可能需要稍微调整正则表达式，因为您的字符串包含一些 unicode，如 ”。要么删除它们，要么先转义它们。

更新

为了不对 HTML 进行转义:

<div dangerouslySetInnerHTML={{ __html: text }}/>

引用:https://facebook.github.io/react/docs/dom-elements.html