通过JS let

Question

我正在尝试创建多个span元素，其中包含一个.，但是发现下面的代码创建了3个.但没有span。

let loadingDots = '';
for (let i = 0; i < 3; i += 1) {
  const dot = document.createElement('span');
  loadingDots += dot.innerHTML = '.';
  document.body.appendChild(dot);
}

如何修复以上代码，将HTML的{​​{1}}输出为

loadingDots

要在查看评论时提供更多背景信息，这在某些方面可能是正确的。

该代码在React <span>.</span><span>.</span><span>.</span> 中的使用方式为

component

class ... render() { let loadingDots = ''; for (let i = 0; i < 8; i += 1) { const dot = document.createElement('span'); dot.innerHTML = '.'; loadingDots += dot.outerHTML; } return ( <Fragment> {loadingDots} </Fragment> ); } } 的当前return元素是loadingDots

我尝试的另一种方法是

...

但这返回为let loadingDots = ''; for (let i = 0; i < 8; i += 1) { loadingDots += '<span>.</span>'; } 而不是"<span>.</span><span>.</span><span>.</span>"

Answer 1

因为变量赋值dot.innerHTML = "."返回值（.），所以该值在+ =中使用。所以那行等于：

loadingDots += ".";

分两行执行：

dot.innerHTML = ".";
loadingDots += dot.outerHTML;

Answer 2

我认为我的问题是因为我在React component中使用。

我在jsx的React文档中的http://jsplumb.github.io/jsplumb/querying.html处找到了解决方案。

const LoadingDots = props => {
  const items = [];
  for (let i = 0; i < props.numTimes; i += 1) {
    items.push(props.children(i));
  }
  return <span>{items}</span>;
};

，然后在jsx组件中

<LoadingDots numTimes={3}>
  {index => <span key={index}>.</span>}
</LoadingDots>