Gatsby - ReactDOM：目标容器不是 DOM 元素答案

【问题标题】：Gastby - ReactDOM: Target container is not a DOM elementGatsby - ReactDOM：目标容器不是 DOM 元素
【发布时间】：2021-03-23 21:22:44
【问题描述】：

我正在尝试使用来自 Reactjs.org 在 Gastby 项目中的示例使用条件渲染来根据条件渲染可重用组件

我的最终目标是无论我是在横向还是纵向，都以不同的方式渲染我的组件，但我想了解为什么即使在基本条件下它也不起作用

我在 React 示例的第一步遇到了错误 ReactDOM：目标容器不是 DOM 元素，这是我正在尝试创建的组件的代码

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


function PortaitMode(props) {
  return <h1>It's in LandscapeMode</h1>;
}

function LandscapeMode(props) {
  return <h1>It's in PortraitMode</h1>;
}

export default function MyComponent(props) {
  const isInPortait = props.isInPortait;
  if (isInPortait) {
    return <PortaitMode />;
  }
  return <LandscapeMode />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <MyComponent isInPortait={false} />,
  document.getElementById("root")
);

我尝试将 <div id="root"></div> 放入我的 index.html 中，甚至将 document.getElementById("root") 更改为 document.getElementById("___gatsby") 但它通过将 myComponent 导入其他 .js 来奇怪地在我的页面上显示 h1 标记文件甚至不使用它...

如果有人可以提供帮助，那就太好了！ :)

【问题讨论】：

嗨，我通常检查它是反应问题还是外部问题是在codesandbox 之类的沙箱中测试我的逻辑，这里我已经粘贴了你的代码，它似乎可以工作@987654322 @为此，我认为这是 Gatbsy 特有的
Yes : ) 基本上它们的代码与reactjs.org/docs/conditional-rendering.html 示例相同，但我试图弄清楚为什么它在 Gatsby 项目中不起作用:'(

标签： reactjs react-hooks gatsby

【解决方案1】：

像这样使用它：

import React from "react";

function PortaitMode(props) {
  return <h1>It's in LandscapeMode</h1>;
}

function LandscapeMode(props) {
  return <h1>It's in PortraitMode</h1>;
}

export default function MyComponent(props) { 
  const isInPortait = props.isInPortait;

  if (isInPortait) {
    return <PortaitMode />;
  }
  return <LandscapeMode />;
}

然后，在另一个页面/组件中，您可以：

import MyComponent from 'your/component/path'

const IndexPage = () =>{

return <main><MyComponent isInPortait={false} /></main>

}

export default IndexPage

如果您的 IndexPage 在 /pages/index.js 内，您将看到您的组件取决于 isInPortait prop。

P.S：你可以保存以下行：

const isInPortait = props.isInPortait;

通过在组件声明中添加解构props，例如：

function portaitMode() {
  return <h1>It's in LandscapeMode</h1>;
}

function landscapeMode() {
  return <h1>It's in PortraitMode</h1>;
}

export default function MyComponent({isInPortait}) {     
  if (isInPortait) {
    return portaitMode();
  }
  return landscapeMode();
}

注意：另外，组件并没有对props做任何事情，所以你可以避免传递它。

您甚至可以缩短它，但这完全取决于您：

export default function MyComponent({isInPortait}) {  
    return isInPortait ? portaitMode() : landscapeMode();
}

【讨论】：