Gatsby

Question

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

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

我卡在 React 示例的第一步，出现错误 ReactDOM: Target container is not a DOM element，这是我正在使用的组件的代码正在尝试创建

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") ，但显示 h1 标签时出现异常在我的页面上，只需将 myComponent 导入另一个 .js 文件而不使用它 ...

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

Answer 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 />;
}

然后，在另一个 page/component 中，您可以：

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();
}

Gatsby - ReactDOM: 目标容器不是 DOM 元素

Gastby - ReactDOM: Target container is not a DOM element

reactjs

react-hooks