В Gatsby (как и в любом проекте React) вы можете использовать функцию document.getElementbyId или другие функции DOM. Однако это считается плохой практикой, поскольку вы создаете виртуальную DOM, чтобы избежать доступа к реальной DOM из-за огромного влияния на производительность (например, jQuery).
Конечно, вы можете используйте их, но, в частности, в Gatsby, поскольку он выполняет предварительную визуализацию вашего проекта и functions / logi c перед созданием некоторых глобальных объектов, это может вызвать серьезные проблемы. Большинство этих проблем объясняется в Debugging HTML Builds (из официальной документации Gatsby). Другими словами, window или document могут не быть созданы в тот момент, когда ваша функция их запрашивает.
Вы можете избежать этих проблем, используя жизненный цикл React (componentDidMount или useEffect хук) потому что они ждут, пока сгенерируется дерево DOM, чтобы запустить его.
Отвечая на ваш вопрос; если вы хотите избежать использования высокоэффективной DOM-функции, вам следует использовать React ref.
const Post= ({ data }) => {
const postReference = useRef(null),
return <Layout>
<div ref={postReference} dangerouslySetInnerHTML={{ __html: post.html }} />
};
В этом фиктивном примере postReference.current будет иметь точно такую же информацию, как document.getElementById(postId) . И это имеет низкое влияние на производительность.
Если вы все еще хотите использовать функцию document.getElementById, вы должны сделать что-то вроде:
const Post= ({ data }) => {
useEffect(()=>{
console.log(document.getElementById("myPost"))
}, []):
return <Layout>
<div id="myPost" dangerouslySetInnerHTML={{ __html: post.html }} />
};
Ссылки: https://reactjs.org/docs/refs-and-the-dom.html
Когда я пытаюсь сделать это обычным javascript способом, я получаю предупреждение о том, что моей переменной присвоено значение, но оно никогда не используется. Есть ли способ исправить это?
Вы можете игнорировать эти предупреждения, но я бы посоветовал этого не делать. Они появляются из-за конфигурации ESLint. Чтобы удалить его, вам просто нужно найти .eslintrc.json в папке root и удалить эту строку: "no-unused-vars": "warn".