Невозможно использовать объект документа внутри компонента реакции. ошибка "документ не определен" - PullRequest
Новая
       6

Невозможно использовать объект документа внутри компонента реакции. ошибка "документ не определен"

0 голосов
/ 09 июля 2020

У меня есть код сниффинга браузера, который я использую внутри компонента реакции 

import React, { useState } from 'react'

const SomeComponent = ({props}) => {
  const isIE = document.documentMode;
  return (
    <div>
      Some browser sniffing code here.
    </div>
  )
}

Я получаю эту ошибку при сборке, хотя «документ не определен»

Это также не удается, когда я пытаюсь сделать это вот так 

import React, { useState } from 'react'

const isIE = document.documentMode;

const SomeComponent = ({props}) => {
  console.log(isIe)
  return (
    <div>
      Some browser sniffing code here.
    </div>
  )
}

Я использую компонент библиотеки create-react-library на следующем сервере.

Какой лучший способ получить доступ к объекту документа внутри реакции ?

Я видел здесь код реакции обнюхивания браузера, но он не работал, потому что я получил ошибки в сборке Обнаружение браузера в ReactJS

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Next.js - это фреймворк SSR, ваш код будет работать как на стороне сервера, так и на стороне клиента. Window не будет определяться при работе на стороне сервера. Если вы хотите получить недвижимость от window, вы можете попробовать этот способ.

  1. Получите window, когда вам нужно 

    if (typeof window !== 'undefined') {
   console.log(window.document)
}

В некоторых случаях c вам необходимо запустить компонент only на стороне клиента. В этом случае вы можете использовать dynamic.

components / ClientSideComponent 

const ClientSideComponent = props => {
    // You could get window directly in this component 
    console.log(window.document)
    return (
      <div>
         run your code only on client side
      </div>
    )
}

страниц / index 

import dynamic from 'next/dynamic';
const ClientSideComponent = dynamic(() => import('../components/ClientSideComponent'), {
    ssr: false,
});

const HomePage = props => {
    return <ClientSideComponent />
}
1 голос
/ 10 июля 2020

Когда вы используете Next.js, вы должны знать, что часть вашего кода будет выполняться на стороне сервера, где window, document и другие API-интерфейсы c, специфичные для браузера, будут недоступны.

Поскольку хук useEffect работает только на стороне клиента, вы можете использовать его вместе с useState для достижения своей цели: 

import React, { useState, useEffect } from "react";

const SomeComponent = ({ props }) => {
  const [isIE, setIsIE] = useState(false);
  useEffect(() => {
    setIsIE(document.documentMode);
  }, []);
  if (!isIE) return null;
  return <div>Some browser sniffing code here.</div>;
};
...