[英]How to add whitespaces in React JSX
I have this li
tag 我有这个
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>
And I need to add an space between the <i></i>
tag and what's inside the {}
{project.get('name') === 'default' ? 'No Project' : project.get('name')}
而且我需要在
<i></i>
标记和{}
{project.get('name') === 'default' ? 'No Project' : project.get('name')}
里面的内容之间添加空格{project.get('name') === 'default' ? 'No Project' : project.get('name')}
{project.get('name') === 'default' ? 'No Project' : project.get('name')}
How can I do this? 我怎样才能做到这一点? I tried
<span></span>
but It doesn't work (I need an extra space, not a new line) 我尝试了
<span></span>
但是它不起作用(我需要一个额外的空间,而不是换行)
You can try: 你可以试试:
1) Either {' '}
or {" "}
: 1)
{' '}
或{" "}
:
<li>
<i className="..."></i>
{' '}my text
</li>
2) Simply use the HTML entity
2)只需使用HTML实体
: :
<li>
<i className="..."></i>
my text
</li>
3) Alternatively, you could insert spaces in the strings: 3)或者,您可以在字符串中插入空格:
<li>
<i className="..."></i>
{project.get('name') === 'default' ? ' No Project' : ` ${project.get('name')}`}
</li>
In the last example, notice the use of string substitution . 在最后一个示例中,请注意使用字符串替换 。
在打印html内容时,也可以在危险地设置InnerHTML中使用&nbsp
<div dangerouslySetInnerHTML={{__html: 'sample html text: '}} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.