Javascript 试图用字符串插入JSX

我目前在我的登录页面设置中有我的欢迎信息，在用户在模式中键入他们的名字之前，只显示Hello。我想把Hello拿走，在用户点击submit后，让它和用户名一起出现

这就是它目前的样子。

在模式中输入我的名字后，它看起来如下所示：

我尝试用字符串插入JSX，但没有成功。有人能帮忙吗

这就是我在渲染中使用它的方式

   <h1>{`Hello ${this.state.submitedFirstName && this.state.submitedFirstName}`}</h1>

您是否尝试过：

<h1>Hello {YOUR_VARIABLE_HERE}</h1>

？

您是否尝试过：

<h1>Hello {YOUR_VARIABLE_HERE}</h1>

---

？

您可以使用条件运算符：

   <h1>{ this.state.submitedFirstName ? ` Hello ${this.state.submitedFirstName}` : ""}</h1>

设置状态后，this.state.submitedFirstName===Mike。左侧Mike的计算结果为truthy，因此它返回右侧Mike

console.log(this.state.submitedFirstName && this.state.submitedFirstName) // "Mike" (from the right side to be specific)
// console.log(`Hello ${"Mike"}`) // "Hello Mike"

这就是为什么它要么返回Hello undefined，要么返回Hello Mike

---

退房

可以使用条件运算符：

   <h1>{ this.state.submitedFirstName ? ` Hello ${this.state.submitedFirstName}` : ""}</h1>

设置状态后，this.state.submitedFirstName===Mike。左侧Mike的计算结果为truthy，因此它返回右侧Mike

console.log(this.state.submitedFirstName && this.state.submitedFirstName) // "Mike" (from the right side to be specific)
// console.log(`Hello ${"Mike"}`) // "Hello Mike"

这就是为什么它要么返回Hello undefined，要么返回Hello Mike

---

退房

这样，如果this.state.submitedFirstName为null或未定义，render方法将返回null

render() {
  const { submitedFirstName } = this.state;
  return (
    !!submitedFirstName
    && <h1>{`Hello ${submitedFirstName}`}</h1>
  );
}

---

这样，如果this.state.submitedFirstName为null或未定义，render方法将返回null

render() {
  const { submitedFirstName } = this.state;
  return (
    !!submitedFirstName
    && <h1>{`Hello ${submitedFirstName}`}</h1>
  );
}

---

只需将submitedFirstName的默认值设置为状态中的空字符串。因此，如果我理解正确，您希望显示Hello，并且当用户Mike提交其姓名时，您希望仅显示Mike？或者你想向迈克问好吗？@samdouble我想向迈克问好。现在，在用户提交名称之前，您只能在登录页上看到hello。我想在用户输入姓名后删除该hello并显示hello Mike。只需将SubmittedFirstName的默认值设置为状态中的空字符串。因此，如果我理解正确，您希望显示hello，并且当用户Mike提交其姓名时，您希望仅显示Mike？或者你想向迈克问好吗？@samdouble我想向迈克问好。现在，在用户提交名称之前，您只能在登录页上看到hello。我想在用户输入他们的名字后删除hello并显示hello Mike。我尝试使用您的两个建议，结果显示我得到了一个空字符串。我的州是提交的名字：谢谢。你知道为什么我最初的解决方案是错误的吗？我很想知道我犯了什么错误，以便学习。@csb00更新了我的答案，解释了为什么它不起作用。祝你好运我尝试使用了你的两个建议，但似乎我得到了一个空字符串。我的州是提交的名字：谢谢。你知道为什么我最初的解决方案是错误的吗？我很想知道我犯了什么错误，以便学习。@csb00更新了我的答案，解释了为什么它不起作用。祝你好运