Написание скриптов nodejs внутри HTML следующего - PullRequest
Новая
       8

Написание скриптов nodejs внутри HTML следующего

0 голосов
/ 18 февраля 2019

Я программирую свой новый веб-сайт в структуре с nodejs, nextjs и expressjs.Проблема в том, что я хочу написать оператор if внутри HTML-части, который в этом случае будет писать оператор 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 на сайте.Как бы я это сделал, но если бы скрипт действительно был скриптом?

1 Ответ

0 голосов
/ 21 февраля 2019

Next.js использует React, который позволяет вам написать что-то под названием jsx, что вы называете «HTML-частью».Вы можете писать выражения JavaScript в jsx, но они должны быть заключены в скобки {}.В противном случае любой код JS будет фактически интерпретироваться как текстовая строка в отображаемом HTML.Ознакомьтесь с документами React для встраивания выражений в JSX .

. Существует множество способов сделать условный рендеринг в 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
...