如何在React的同一行中显示两个单词？

Question

I had this code before: 我之前有以下代码：

projectName: project.get('name') === 'default' ? 'No Project' : project.get('name')

And in the render() method I had this: 在render（）方法中，我有这个：

<div className='c-card__projects'>
  Project: {card.projectName}
</div>

and It looked like this in the UI 在用户界面中看起来像这样

Now I changed the code to take into account the color of the project like this: 现在，我更改了代码以考虑项目的颜色，如下所示：

  projectName: <div style={{color: project.get('color')}}>
    {project.get('name') === 'default' ? 'No Project' : project.get('name')}
  </div>

And now it looks like this: 现在看起来像这样：

How can I do to be display in the same line as before, instead of two lines (I just wanted to change the color)? 如何显示在以前的同一行而不是两行（我只是想更改颜色）？

Answer 1

Try changing to a span for inline styling. 尝试更改为跨度以进行内联样式。

projectName: 
<span style={{color: project.get('color')}}>
    {project.get('name') === 'default' ? 'No Project' : project.get('name')}
</span>