Попытка интерполировать 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>}

---

Вот обновление, объясняющее, почему исходный код не работал Я разобью его на порядок выполнения и объясню:

Состояние 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 для получения дополнительной информации о && и других логических операторах .

Answer 2

Таким образом, метод рендеринга вернет ноль, если this.state.submitedFirstName равно нулю или не определено.

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

Answer 3

Вы пробовали:

<h1>Hello {YOUR_VARIABLE_HERE}</h1>

?