如何在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>标签和内部的内容之间添加一个空格{} {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>

在最后一个示例中,请注意字符串替换的使用.