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>标记与{} {project.get('name') === 'default' ? 'No Project' : project.get('name')}

内的内容之间添加一个空格

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

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>

在最后一个示例中，请注意使用string substitution。

Answer 2

打印html内容时，也可以在危险地使用SetInnerHTML中使用＆nbsp

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

如何在React JSX中添加空格

2 个答案: