Question

我正在用nodejs，nextjs和expressjs的结构对我的新网站进行编程。问题是，我想在HTML部分内编写if语句，在这种情况下，它将if语句写为网站上的普通html：

const Admin = () => (

  <AdminLayout>

  <style global jsx>
  {
  `body {
    background: #eff0f3;
   }`
  }
  </style>  
    <div className="jumbotron" style={jumbotron}>

      if (1=1) {
      <h3>Please select a tool first.</h3>
    } else {
      <h3>Something is wrong :/ .</h3>
    }

    </div>
  </AdminLayout>
)

export default Admin

输出就是：

如果（1 = 1）请先选择一个工具。其他出了点问题：/。

以HTML格式显示在网站上。我要怎么做才能让脚本实际上是脚本？

Answer 1

Next.js使用React允许您编写名为jsx的东西，这就是您所说的“ HTML部分”。您可以在jsx中编写JavaScript表达式，但需要将其包装在{}中。否则，任何JS代码实际上只会在呈现的HTML中解释为文本字符串。查看Embedding Expressions in JSX的React Docs。

有很多方法可以conditional rendering in React。

这是使用{}嵌入表达式和三元运算符来重写代码的一种方法：

const Admin = () => (
  <AdminLayout>
    <style global jsx>{`
      body {
        background: #eff0f3;
      }
    `}</style>  
    <div className="jumbotron" style={jumbotron}>
      {1 == 1 ? (
        <h3>Please select a tool first.</h3>
      ) : (
        <h3>Something is wrong :/ .</h3>
      )}
    </div>
  </AdminLayout>
)

export default Admin

在nextjs HTML中编写Node.js脚本

1 个答案: