React JSX中如何在<i>标签与动态内容间添加空格？

嘿，这个问题我之前也踩过坑！在JSX里，当元素和表达式紧挨着的时候，直接敲的空格经常会被编译器压缩掉，导致看不到效果。给你几个实用的解决办法：

方法1：使用字符串字面量插入空格 #

直接在<i>标签后面插入一个包含空格的字符串字面量{' '}，JSX会把它渲染成一个实打实的空格，不会被压缩。修改后的代码如下：

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

方法2：用CSS控制间距（更推荐） #

如果以后可能需要调整这个间距的大小，用CSS的margin-right或者padding-right会更灵活，不需要改动JSX结构。你可以直接给<i>标签添加内联样式：

<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'), marginRight: '0.5rem'}}></i>
  {project.get('name') === 'default' ? 'No Project' : project.get('name')}
</li>

这里的0.5rem可以根据你的需求调整成具体的像素值（比如8px），这样图标和文本之间的间距会更可控。

为什么之前的<span>没效果？ #

你之前用<span></span>没起作用，大概率是因为span标签里没有内容，或者里面的空格被JSX压缩了。如果一定要用span的话，需要在里面插入空格的字符串字面量，比如：

<i className='fa fa-square' style={{color: project.get('color')}}></i>
<span>{' '}</span>
{project.get('name') === 'default' ? 'No Project' : project.get('name')}

不过这种方法比第一种多了一个多余的span标签，不如直接用字符串字面量简洁。

内容的提问来源于stack exchange，提问作者Lizz Parody