从React javascript中的一个集合创建一个多行字符串

Question

我有一个React函数，其中有一个集合，我想使用集合中的数据更新HTML元素。以下是代码示例：

const myFunc = (mySet) => {
document.getElementById('myId').innerHTML = Array.from(mySet).join(' ');
} 
...
// In the render code:
<p id="myId> </p>

这使用空格分隔符正确地连接了集合元素，但我希望以项目符号列表或新行的形式显示它。

是否可以使用innerHTML进行多行追加？

例如：mySet=("苹果"、"香蕉"、"胡萝卜"、"鼓槌"(

我的代码输出：苹果香蕉胡萝卜鼓槌

所需输出：

苹果

香蕉

胡萝卜

鼓槌

(或(

• 苹果
• 香蕉
• 胡萝卜
• 鼓槌

Answer 1

只需对join进行一点修改，即可将innerHTML更改为insertAdjacentHTML

const myElement = document.getElementById('myId')
myElement.insertAdjacentHTML('afterBegin',Array.from(mySet).join('<br/>'));

但在我看来，您不应该直接用document操作DOM，这是React的反模式。

我建议你使用状态来更新你的组件

const [currentSet, setCurrentSet] = useState([])
const myFunc = (mySet) => {
setCurrentSet(mySet);
} 
return <div id="myId">currentSet.map((item) => <p>{item}</p>)</div>

Answer 2

如果mySet是一个数组，您应该使用React来渲染您的项目：

const myFunc = (mySet) => {

return(
<ul>
{mySet && mySet.map(val=>{return (<li>{val}</li>)})}
</ul>
)
} 

Answer 3

如果您正在使用innerText，您可以尝试：

Array.from(mySet).join('n')

但是如果你使用innerHtml，那么试试这个：

Array.from(mySet).join('<br/>')

或者你可以用标签映射项目：

Array.from(mySet).map(function(el) {return '<div>' + el + '</div>';}).join(' ')

Answer 4

innerHTML需要一个字符串，因此您必须按照如下方式构造一个元素字符串：

const myFunc = (mySet) => {
const innerHTMLString = Array.from(mySet).map((item) => `<div>${item}</div>`).join('');
document.getElementById('myId').innerHTML = innerHTMLString;
}

然后你可以在组件中测试它，如下所示：

import React from 'react';
export function App(props) {
const myFunc = (mySet) => {
const innerHTMLString = Array.from(mySet).map((item) => `<div>${item}</div>`).join('');
document.getElementById('myId').innerHTML = innerHTMLString;
}
return (
<div className='App'>
<button onClick={() => myFunc(new Set(['Apple', 'Banana', 'Carrot', 'Drumstick']))>
<p id="myId> </p>
</div>
);
}

Answer 5

您也可以进行Set.prototype.forEach()

const mySet = new Set(['Apple', 'Banana', 'Carrot', 'Drumstick']);
let ulElm = '<ul>';
mySet.forEach((value) => ulElm += `<li>${value}</li>`);
ulElm += '</ul>';
document.getElementById('result').innerHTML = ulElm;

<p id="result"></p>