如何在React JSX中添加空格

Question

我有一个 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> 标签之间添加一个空格。如何实现这个功能呢？我尝试使用<span></span>，但是它并不能达到我想要的效果（我需要的是一个额外的空格而不是一个新行）。

- Lizz Parody

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

在最后一个例子中，注意到了字符串替换的使用。

- inostia

Answer 2

在打印 HTML 内容时，您还可以在 dangerouslySetInnerHTML 中使用&nbsp

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

- Hemadri Dasari