反应如何显示标签，即使是空的

Question

我有一个标签，用于显示用户输入的文本输入中的字符串。
该字符串存储在question变量中，并显示如下：

<label
  className={css('form-title-label')}>
    {question}
</label>

但是，当用户未在文本输入中编写任何内容时，该变量为空并且不显示标签，这将导致周围的组件向上移动并填充空间。
我如何确保即使标签是空的标签也存在，以阻止所有内容移动？

Answer 1

我只给变量一个默认值，例如“”，以便始终存在该值。

const question = this.props.question || " "

Answer 2

您可以有条件地显示间隔元素，例如

const spacer = (<span>&nbsp;</span>);

return (
  <label
    className={css('form-title-label')>
      {question || spacer}
  </label>
);