用React.js组件替换部分html字符串并渲染（没有dangerouslySetInnerHTML）

Question

I'm working with Node.js/React.js client that fetch data from WordPress API and I've faced quite tricky problem. But hopefully You can help me out! :)

So I have this kind of data as a string from WordPress API (single page content):

"<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>"

What I need to do is replace the shortcode [gravityform id=”42″ title=”true” description=”true”] [gravityform id=”42″ title=”true” description=”true”] [gravityform id=”42″ title=”true” description=”true”] to React component <GravityForm /> with wanted event handlers etc. and render other html elements as is.

I'm doing the replacing like:

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} />;
        }
    );
};

So replacing [shortcodes] with React components is already covered but after that the html data looks like this: [ 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>" ]

So obviously that ain't going to work within render() because

1. If I just render that data the form is working fine but all html strings are escaped by default
2. If I use dangerouslySetInnerHTML it looks like this ( <GravityForm /> is [object Object] ) dangerouslySetInnerHTML-screenshot

So is there any reasonable solution for this problem? Or should this be approached from some different perspective?

Thanks for your help!

---

EDIT

@joy Yes, your solution is changing the html string to React Components, but it still doesn't solve the html escape issue. So I still have output like ( 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>

But is it even possible to render that html without parsing the html elements one by one from the string?

---

EDIT 2 (Solution – kind of)

So I finally figured out ~working~ solution for this case.

1. I use react-html-parser to parse html elements from the data string
2. Then the data is like (Objects are React elements): [ 0:Object 1:Object 2:"[gravityform id=”42″ title=”true” description=”true”]" 3:Object 4:Object 5:Object 6:Object ]
3. Finally loop that data replaceGravityFormShortcodesFromArrayOfObjects(arrayOfObjects) , replace [gravityform id=”42″ title=”true” description=”true”] with <GravityForm /> and then just render the data

---

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;
};

BUT this works only if html structure is one level deep. If "[gravityform id=”42″ title=”true” description=”true”]" is inside React element props.children , it's get trickier and I haven't figured out working solution yet.

Answer 1

I encountered exactly the same issue, and here is my solution:

Define the string:

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>`

Split the string by [*] :

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

Extract the ids:

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

Now the arrays normalText and ids has the content we want to concatinate. Simply concat them:

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

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

You may want to tune the regular expression a bit, as your string contains some unicode like ” . Either remove them or escape them first.

Update

In order not to escape HTML:

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

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