ReactJS

Question

我试图将我的 JSX 缩进得更好一些，但我在组件之间丢失了一个空白 space。例如

<span>Saved: { this.props.fetchedTitle + ' ' }
    <AjaxButton css='btn-danger btn-xs' running={this.props.deleting} onClick={this.props.deleteBook} text='Delete' runningText='Deleting' />{' '}
    <BootstrapButton preset='info-xs' onClick={() => this.expand()}>D</BootstrapButton>
</span>

请注意在 fetchedTitle 和 AjaxButton 之后插入的手册 space。如果我将所有内容都塞进一行，并在组件之间添加 spaces，则会为我插入 space。当我将内容分成多行时，space 消失了，迫使我手动添加它，即使我在换行符之前或之后手动插入 space ].

有办法解决这个问题吗？（这 ui 只是一个粗略的原型/探索性练习 - 最终可能会有更健壮的布局，但我仍然想了解为什么 React 以这种方式响应 jsx）

Answer 1

试试这个。

<span>Saved: { this.props.fetchedTitle }&nbsp;
    <AjaxButton css='btn-danger btn-xs' running={this.props.deleting} onClick={this.props.deleteBook} text='Delete' runningText='Deleting' />&nbsp;
    <BootstrapButton preset='info-xs' onClick={() => this.expand()}>D</BootstrapButton>
</span>

Answer 2

React 控制它。 Fiddle example is here。那么让我来描述一下围绕这个误解的两个时刻：

当您尝试将白色 space 放在两个组件之间时，您必须将这些组件放在一行中，如下所示：

  <Parent>
     <Child1 title='Yo'/><Child2 title='Yo'/>
  <Parent>

会翻译成whitespace like

Yo Yo

但是如果您将组件分隔在不同的行中

<Mother>
  <Child1 title='Yo'/>
  <Child2 title='Yo'/>
</Mother>

会翻译不带whitespace

YoYo

React Link is here!

希望对您有所帮助！

谢谢！

Answer 3

在组件之间添加空格的另一个快速技巧是使用以下内容：

{' '}

每https://github.com/facebook/react/issues/1643#issuecomment-45325969

ReactJS - 换行符在组件之间丢失空格

ReactJS - newlines lose spaces between components

javascript

react-jsx