Reactjs 反应-将组件的所有代码包含在父组件中与不包含在父组件中有什么不同

我正在努力理解和使用

我想了解的是这两个例子之间的区别。您将看到，我只需将组件

UseMapExample

移动到父级

Home

我很好奇React和定制挂钩到底发生了什么。useMap在这两个示例中的作用不同（第一个示例中有效，第二个示例中无效-没有错误-但所有变量都未定义）

provider和useMap的代码位于和的底部，带有导入，以了解要查看的文件

工作前：

---

你有什么错误吗？没有，第一个没有渲染地图。在这两个示例中，useMap的作用不同。可能您需要在

MapkitProvider

的子级中使用

useMap

钩子。共享

MapkitProvider

和

useMap

的代码，因为它使用的是React上下文（）

MapkitProvider

为其子级提供上下文

const UseMapExample = () => {
  const { map, mapProps } = useMap();

  return (
    <>
      <div className="myMap">
        <Map {...mapProps} />
      </div>
      <style jsx>{`
        .myMap {
          height: 700px;
        }
      `}</style>
    </>
  );
};

const Home: FunctionComponent<MapProps> = () => {
  return (
    <>
      <MapkitProvider tokenOrCallback={mapkitKey}>
        <UseMapExample />
      </MapkitProvider>
    </>
  );
};

const Home: FunctionComponent<MapProps> = () => {
  const { map, mapProps } = useMap();

  return (
    <>
      <MapkitProvider tokenOrCallback={mapkitKey}>
        <div className="myMap">
          <Map {...mapProps} />
        </div>
        <style jsx>{`
          .myMap {
            height: 700px;
          }
        `}</style>
      </MapkitProvider>
    </>
  );
};

import { Map } from "../components/mapkit/Map";
import { useMap } from "../components/mapkit/useMap";
import { MapkitProvider } from "../components/mapkit/MapkitProvider";