在 nextjs HTML 中编写 nodejs 脚本

【问题标题】：Writing nodejs scripts inside nextjs HTML在 nextjs HTML 中编写 nodejs 脚本
【发布时间】：2019-02-21 06:00:44
【问题描述】：

我正在使用 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。如果脚本实际上是脚本，我该怎么做？

【问题讨论】：

标签： node.js express next.js

【解决方案1】：

Next.js 使用 React，它允许您编写名为 jsx 的东西，这就是您所说的“HTML 部分”。您可以在 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

【讨论】：