时间戳

首页 > 解决方案 > 尝试用字符串插入 JSX

javascript - 尝试用字符串插入 JSX

问题描述

我目前在我的登录页面设置上有我的欢迎消息，即在用户在模式中输入他们的名字之前只显示“你好”。在用户点击提交后，我很想把“你好”拿走，让它和用户名一起出现。

这就是它目前的样子。 在此处输入图像描述

在模式中输入我的名字后，它看起来像这样： 在此处输入图像描述

我尝试用字符串插入 JSX，但没有运气。有人可以帮忙吗？

这就是我在渲染中的方式。

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

标签： javascriptreactjsjsx

解决方案

您可以使用条件运算符：

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

如果 this.state.submitedFirstName 是未定义的或任何错误的（例如空字符串“”），它将返回 'Hello Mike' 或返回一个空字符串。

您还可以将条件移到外部，这样它甚至不会呈现 h1 标记，除非有名称。

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

这是一个更新来解释为什么原始代码不起作用。我将把它分解成它被执行的顺序并解释：

状态this.state.submitedFirstName以未定义开始。因此，当代码第一次运行时，&&（AND 运算符）的左侧计算为undefined. 因为 && 不满足，所以从表达式中返回左侧：

console.log(this.state.submitedFirstName && this.state.submitedFirstName) // undefined (from the left side to be specific)
console.log(`${undefined}`) // "undefined" is converted to string 
console.log(`Hello ${undefined}`) // "Hello undefined"

状态设置后this.state.submitedFirstName === "Mike"。左侧“Mike”的计算结果为真，因此它返回也是“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”的原因。

查看mdn 以获取有关 && 和其他逻辑运算符的更多信息。

推荐阅读