Блог

Главная - Вопросы по программированию - ReactDOM.render не работает в getUserConfirmation

ReactDOM.render не работает в getUserConfirmation

#reactjs #react-router-dom #react-dom

#reactjs #react-router-dom #реагировать-dom

Вопрос:

Я пытаюсь протестировать функциональность getUserConfirmation. Код следующий:

 getUserConfirmation={(message, callback) => {
          const container = document.createElement('div');
          // callback(false);
          document.body.append(container);
          ReactDOM.render(
            <div
              style={{
                width: '400px',
                height: '400px',
                backgroundColor: 'black',
                zIndex: 1000,
              }}
            />,
            container,
            console.log('Here'),
          );
        }}
      >

Код реагирует на мою попытку изменить URL и обратный вызов (console.log(‘here’)) работает. Но в браузере ничего не отображается. Что я делаю неправильно?

Ответ №1:

Это работает в этом примере:

 const getUserConfirmation = (message, callback) => {
  const container = document.createElement("div");
  // callback(false);
  document.body.append(container);
  ReactDOM.render(
    <div
      style={{
        width: "400px",
        height: "400px",
        backgroundColor: "black",
        zIndex: 1000
      }}
    />,
    container,
    console.log("Here")
  );
};

getUserConfirmation();  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
</body>

</html>

Однако, какова цель этого? Почему бы не иметь единый и фиксированный «корневой div» в html и не передать этот элемент в ReactDOM.render?

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

1. Хм, я ничего не вижу в вашем HTML-тексте… Что значит «это работает». Я использую его, потому что для моего случая это только один допустимый метод.

2. Я тестировал на Firefox и Chromium. Добавление ‘position: absolute;’ заставляет свойство z-index работать, но я могу видеть и без position . Возможно, у вашего браузера какой-то странный CSS по умолчанию.

Ответ №2:

Я добавил позицию: ‘absolute’ и теперь я вижу свой div. Прежде чем я его «спрятал» под тегами scripts. Лол