Question

我正在做一个if / else语句来设置名为＆＃39; signupMessage＆＃39;的JSX元素的内容。我后来呈现了＆＃39; signupMessage＆＃39;的内容。

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>
)}

在＆＃39;否则如果＆＃39;块，我需要两个h1标签，以便根据规格控制确切地在一条线上出现哪些单词，即使在不同的设备上也是如此。

现在，它输出为＆＃34; [object Object] [object Object]＆＃34;。如何让JSX呈现为h1标签？

Answer 1

JSX元素必须有一个容器：

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

而不是尝试连接＆＃34;字符串＆＃34; （就像它是html一样） - 将它们包装在一个新容器中并渲染该容器。

Answer 2

在您的代码中，这一行：

<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返回一个对象，JS中的object + object导致：

"[object Object][object Object]"

这就是你看到输出的原因。

如何解决此问题

将<h1>中的两个<div>换行：

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

Answer 3

尝试添加一个中断，您需要将该消息的第二位放在另一行上，并且只返回一个h1标记：

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

如何渲染变量内的JSX

3 个答案:

如何解决此问题