在 nextjs 中编写 nodejs 脚本 HTML

Question

我正在用 nodejs、nextjs 和 expressjs 的结构对我的新网站进行编程。问题是我想在 HTML 部分内写一个 if 语句，在这种情况下，它会在网站上像正常 html 一样写 if 语句：

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）请先select一个工具。别的出了点问题：/ .

在网站上

为 HTML。如果脚本实际上是一个脚本，我该怎么做？

Answer 1

Next.js 使用 React 允许你写一些叫做 jsx 的东西，这就是你所说的 "HTML part"。您可以在 jsx 中编写 JavaScript 表达式，但它们需要包装在 {} 括号中。否则，任何 JS 代码实际上只会被解释为呈现的 HTML 中的文本字符串。查看 Embedding Expressions in JSX.

的 React 文档

有很多方法可以做到 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 中编写 nodejs 脚本 HTML

Writing nodejs scripts inside nextjs HTML

node.js

express

next.js