如何在 React JSX 中添加空格

Posted 2023-02-21

【中文标题】如何在 React JSX 中添加空格

【英文标题】：How to add whitespaces in React JSX

【发布时间】：2018-06-29 07:18:16

【问题描述】：

我有这个li 标签

<li className='u-cursor--pointer u-padding-vertical-small c-start-retro-line'
  key=project.get('id')
  onClick=() => this.handleProjectSelection(project.get('id')) >
  <i className='fa fa-square' style=color: project.get('color')></i>
  project.get('name') === 'default' ? 'No Project' : project.get('name')
</li>

我需要在 <i></i> 标签和 project.get('name') === 'default' ? 'No Project' : project.get('name') 里面的内容之间添加一个空格

我该怎么做？我试过<span></span> 但它不起作用（我需要一个额外的空间，而不是一个新行）

【参考方案1】：

你可以试试：

1) ' ' 或 " ":

<li>
    <i className="..."></i>
    ' 'my text
</li> 

2) 只需使用 html 实体  :

<li>
    <i className="..."></i>
    &nbsp;my text
</li> 

3) 或者，您可以在字符串中插入空格：

<li>
    <i className="..."></i>
    project.get('name') === 'default' ? ' No Project' : ` $project.get('name')`
</li>

在最后一个例子中，注意string substitution的使用。

【参考方案2】：

打印html内容时也可以在dangerlySetInnerHTML中使用&nbsp

<div dangerouslySetInnerHTML=__html: 'sample html text: &nbsp;' />