如何在 React JSX 中添加空格答案

【问题标题】：How to add whitespaces in React JSX如何在 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> 但它不起作用（我需要一个额外的空间，而不是一个新行）

【问题讨论】：

标签： javascript html css reactjs jsx

【解决方案1】：

你可以试试：

1) {' '} 或 {" "}:

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

2) 只需使用 HTML 实体 &nbsp;:

<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;'}} />

【讨论】：