如何运行使用 dangerouslySetInnerHTML 在 jsx 字符串集内循环

Question

我正在尝试运行像这样循环

const items = [{name: 'nice'},{ name: 'bice'}, {name: 'tice'}]
 const stringJsx = `
 <ol>
    ${
      items.map((item, index) =>{
        return (
          <li key={index}>this is a nice item : ${item.name}</li>
        )
      })
    }
</ol>
return (
 <>
    
    <h1 id='nice'> this is a nice h1 tag</h1>
    <div dangerouslySetInnerHTML={{ __html: stringJsx }} />
    
 </>
 )
`

我 sm [object Object],[object Object],[object Object] 作为结果。我如何运行条件、循环和其他来自 jsx 的字符串？

我需要这个 jsx 作为字符串，并将存储在数据库中。

谢谢。

Answer 1

因为你希望它是一个字符串，你必须 return map() 中的一个字符串，而不是 html 元素，将 stringJsx 更改为类似:

const stringJsx = (`
    <ol>
        ${
            items.map((item, index) => {
                return `<li key=${index}>this is a nice item : ${item.name}</li>`;
            }).join('')
        }
    </ol>
`);

顺便说一句：考虑在地图后使用 join('')，这样 <li> 和

之间就不会再有任何 ,

使用以上代码的完整代码段：

class Example extends React.Component {    
    render() {

        const items = [{name: 'nice'},{ name: 'bice'}, {name: 'tice'}];
        const stringJsx = (`
            <ol>
                ${
                    items.map((item, index) => {
                        return `<li key=${index}>this is a nice item : ${item.name}</li>`;
                    }).join('')
                }
            </ol>
        `);
        
        return (
            <React.Fragment>
                <h1 id='nice'> this is a nice h1 tag</h1>
                <div dangerouslySetInnerHTML={{ __html: stringJsx }} />
            </React.Fragment>
        )
    }
}

ReactDOM.render(<Example />, document.body);

:root{
    --bg-clr-1: #E7F8F8;
    --card-clr-red: #F03E3E;
    --card-clr-violet: #7950F2;
    --card-clr-green: #12B886;
    --text-clr: #333;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

编辑：

另一个片段，基于 , without join(). I've used reduce() 以获得相同的行为；

const stringJsx = items.reduce((prev, cur, index) => (
    prev + `<li key=${index}>this is a nice item : ${cur.name}</li>`
), '');

class Example extends React.Component {    
    render() {

        const items = [{name: 'nice'},{ name: 'bice'}, {name: 'tice'}];
        const stringJsx = items.reduce((prev, cur, index) => (
            prev + `<li key=${index}>this is a nice item : ${cur.name}</li>`
        ), '');
        
        return (
            <React.Fragment>
                <h1 id='nice'> this is a nice h1 tag</h1>
                <div dangerouslySetInnerHTML={{ __html: stringJsx }} />
            </React.Fragment>
        )
    }
}

ReactDOM.render(<Example />, document.body);

:root{
    --bg-clr-1: #E7F8F8;
    --card-clr-red: #F03E3E;
    --card-clr-violet: #7950F2;
    --card-clr-green: #12B886;
    --text-clr: #333;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

如何运行使用 dangerouslySetInnerHTML 在 jsx 字符串集内循环

How to run a loop inside a jsx string set using dangerouslySetInnerHTML

jsx

reactjs

编辑：

如何 运行 使用 dangerouslySetInnerHTML 在 jsx 字符串集内循环

How to run a loop inside a jsx string set using dangerouslySetInnerHTML

jsx

reactjs

编辑：

如何运行使用 dangerouslySetInnerHTML 在 jsx 字符串集内循环