Блог

Главная - Вопросы по программированию - Как правильно вызывать / отображать код react в html?

Как правильно вызывать / отображать код react в html?

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я пытаюсь отобразить элементы, написанные в js-файле, используя react, вот класс:

 import React from 'react'
import ReactDOM from "react-dom";


const e = React.createElement;

class StartPage extends React.Component {
    render() {
        return(
            <div>
                <h2>...0</h2>
                <h3>...1</h3>
                <p>...3</p>
                <p>...2</p>
                <div id="current_date_time"></div>
                <h:link outcome="main">Go to main page</h:link>
            </div>
        )
    }
}
const domContainer = document.querySelector('#test');
ReactDOM.render(StartPage, domContainer);

вот html:

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script type="text/js" src="js/start.js"></script>
</head>
<body>

<div id="test"/>
</body>
</html>

Но при запуске ничего не происходит, в консоли нет сообщений об ошибках, что я делаю не так?

Комментарии:

1. Должен быть ReactDOM.render(<StartPage/>, domContainer);

2. @lissettdm , это не дает результатов

3. Это недопустимо <h:link результат=»main»>Перейти на главную страницу</h:link>,

4. @lissettdm , я скопировал ваш код, у меня все еще нет результатов, в чем может быть проблема? я что-то неправильно подключил?

5. Добавить <script type=»text/js» src=»js/start.js «></script> внутри тела. если ваш скрипт записывает содержимое страницы, его следует поместить в раздел тела

Ответ №1:

  1. Недопустимый h:link элемент HTML, и, судя по всему, он нигде не определен.
  2. StartPage В рендеринге должен быть вызов компонента, поэтому вместо этого используйте это — <StartPage />

Вот рабочий CodeSandbox — https://codesandbox.io/s/affectionate-williamson-xtxwn?file=/src/index.js

Метки: