javascript - 为什么在 React 和纯 CSS 中呈现的相同代码会提供不同的结果 :

Question

我正在试验 span 和 nowrap，我在 vanilla JS 和 React 中得到了不同的结果。

例如，使用这个 css:

span {
  white-space: nowrap;
}

在常规 javascript 中使用它:

<div>
    <span> lorem ipsum dolor </span>
    <span> lorem ipsum dolor </span>
    <span> lorem ipsum dolor </span>
</div>

对比

class App extends React.Component{
  render() {
    return (
      <div>
        <span> lorem ipsum lorem ipsum </span>
        <span> lorem ipsum lorem ipsum </span>
        <span> lorem ipsum lorem ipsum </span>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

在 React 中，它不会将 span 换行到下一行。这是一个错误还是预期的行为会有所不同？我将如何使用react来模仿 css 的行为。

在 React 中，它从不换行。在 Vanilla JS 中，它将每个语句包装为一个 block ，这是所需的行为。

(已编辑)jsbin 供引用:

1) https://jsbin.com/zuwonirape/edit?html,css,js,output

2) https://jsbin.com/poqezobevo/1/edit?html,css,js,output

Answer 1

这不是 CSS 问题，而是 JSX 处理空白的方式导致的，这与普通 html 略有不同。

根据JSX In Depth react 指南:

JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space.

所以 App 被渲染为

<div><span> lorem ipsum lorem ipsum </span><span> lorem ipsum lorem ipsum </span><span> lorem ipsum lorem ipsum </span></div>

不会在跨度之间中断。

要复制 html 片段的行为，您可以添加一些显式空格:

render() {
  return (
    <div>
      <span> lorem ipsum lorem ipsum </span>{' '}
      <span> lorem ipsum lorem ipsum </span>{' '}
      <span> lorem ipsum lorem ipsum </span>
    </div>
  );
}