Question

在将此问题标记为重复之前，请阅读以下内容：

我想做的是专门在反应中执行此操作，如果这是html，则就像执行以下操作一样容易（div是内联块）：

<div>something</div><
div>something2</div>

那会导致div之间没有空格，很酷，但是我无法在React中做到这一点，因为React使用JSX而不是HTML。

我阅读了使用CSS进行此操作的不同解决方案，其中一些是：

设置一个具有负值的左边距（在调整浏览器窗口大小时这可能会中断（基本上不会响应）
将父容器的font-size设置为0（在某些平台上，我已经读到了这个错误）
将父容器浮动到左侧（我需要使用text-align和float只是弄乱了所有内容）。

所以唯一的办法就是使用flexbox，但是我想知道是否还有其他方法可以删除那些空格（如果没有，我将使用flexbox / table）。

Answer 1

React不会在块元素之间添加空格，您需要手动进行此操作。请参阅Github上的this discussion和官方blog post进行解释。

这是一个简单的例子：

class SimpleExample extends React.Component {
	render() {
		return (
			<div>
        <div>NO</div>
        <div>SPACES</div>
        HERE
			</div>
		);
	}
}

ReactDOM.render(<SimpleExample />, document.getElementById('example'));

div {
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="example"></div>

在React

1 个答案: