javascript - 如何渲染变量内的 JSX

Question

我正在执行 if/else 语句来设置名为“signupMessage”的 JSX 元素的内容。我稍后渲染“signupMessage”的内容。

render() {
  let signupMessage;
  if (this.state.signUpForNewsletter === true) {
    signupMessage = <h1>Thank you</h1>;
  } else if (this.state.signUpForNewsletter === false) {
    signupMessage = <h1>Be the first</h1> + <h1>to see the latest!</h1>;
  }
  return(
  <section className="sign-up">
    {signupMessage}
  </section>
)}

在“else if” block 中，我需要两个 h1 标签，以便根据规范准确控制哪些单词出现在一行上，即使在不同的设备上也是如此。

现在，输出为“[object Object][object Object]”。如何让 JSX 呈现为 h1 标签？

Answer 1

在您的代码中，这一行:

<h1>Be the first</h1> + <h1>to see the latest!</h1>

被转译为:

React.createElement("h1", null, "Be the first") +
React.createElement("h1", null, "to see the latest!");

React.createElement返回一个对象，并且 object + object在 JS 中的结果是:

"[object Object][object Object]"

这就是您看到该输出的原因。

<小时/>

如何解决这个问题

包裹两个<h1>位于 <div> :

signupMessage = <div><h1>Be the first</h1><h1>to see the latest!</h1></div>;