Question

我正在尝试缩进我的JSX，但我在组件之间丢失了一个空白区域。例如

<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之后插入的手动空间。如果我把所有东西塞进一行，组件之间有空格，那么就为我插入空间。当我把东西分成多行时，空间就消失了，迫使我手动添加它，即使我在换行符之前或之后手动插入空格。

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

Answer 1

React控制它。 Fiddle example is here。因此，让我在这个误解中描述两个时刻：

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

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

它将被空白翻译为

哟哟哟。

但是如果你将组件分成不同的行

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

如果没有空白

，它将被翻译

溜溜球

React Link is here!

我希望它会对你有所帮助！

谢谢！

Answer 2

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

{' '}

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

Answer 3

试试这个。

<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>

ReactJS - 换行符会丢失组件之间的空间

3 个答案: