嘗試用字符串插入 JSX

Question

我目前在我的登陸頁面設置上有我的歡迎消息，即只顯示“Hello”，直到用戶在模式中輸入他們的名字。 在用戶點擊提交后，我很想把“你好”拿走，讓它和用戶名一起出現。

這就是它目前的樣子。

在模式中輸入我的名字后，它看起來像這樣：

我嘗試用字符串插入 JSX，但沒有運氣。 有人可以幫忙嗎？

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

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

Answer 1

您可以使用條件運算符：

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

如果 this.state.submitedFirstName 未定義或任何虛假信息（例如空字符串“”），它將返回“Hello Mike”或返回空字符串。

您還可以將條件移到外面，這樣它甚至不會呈現 h1 標記，除非有名稱。

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

---

這是一個更新來解釋為什么原始代碼不起作用。 我將把它分解成它被執行的順序並解釋：

state 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"

在 state 設置后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 以獲取有關 && 和其他邏輯運算符的更多信息。

Answer 2

這樣，如果 this.state.submitedFirstName 是 null 或未定義，則渲染方法將返回 null。

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

Answer 3

你有沒有嘗試過：

<h1>Hello {YOUR_VARIABLE_HERE}</h1>

?