为什么ReactJS呈现的HTML填充空跨度？

Question

如果我在ReactJS组件中有render方法，请执行以下操作：

render: function() {
  return <div>
    <span>some text here</span>
  </div>;
}

最终在内部渲染一些额外的跨度。我该怎样摆脱这些？

Answer 1

解决方案是将你的回报包裹在parens中：

render: function() {
  return (
    <div>
      <span>some text here</span>
    </div>
  );
}

它不仅更具可读性，而且还表明ReactJS忽略了允许您根据需要格式化事物的空白。

Answer 2

似乎某个块之间的任何空间都会导致此问题。例如：

<div> {foo} </div>

将呈现为：

<div><span/>{foo}<span/></div>

使用括号来包装它们并没有帮助，也许是因为我从父组件调用的某处我没有使用它们。