Javascript 如何为GatsbyJS制作一个仅客户端的组件？

如何为Gatsby创建一个将在客户端而不是在构建时加载的组件

我创建了这个，它使用

gatsby develope

进行渲染，但不使用渲染的服务器端渲染

import React from 'react';
import axios from 'axios';
import adapter from 'axios-jsonp';

export default class Reputation extends React.Component<{}, { reputation?: number }> {
    constructor(props) {
        super(props);
        this.state = {};
    }

    async componentDidMount() {
        const response = await axios({
            url: 'https://api.stackexchange.com/2.2/users/23528?&site=stackoverflow',
            adapter
        });
        if (response.status === 200) {
            const userDetails = response.data.items[0];
            const reputation = userDetails.reputation;
            this.setState({
                reputation
            });
        }
    }

    render() {
        return <span>{ this.state.reputation?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
    }
}

从“React”导入React；
从“axios”导入axios；
从“axios jsonp”导入适配器；
导出默认类。组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
异步组件didmount（）{
常数响应=等待axios({
网址：'https://api.stackexchange.com/2.2/users/23528?&site=stackoverflow',
适配器
});
如果（response.status==200）{
const userDetails=response.data.items[0]；
const reputation=userDetails.reputation；
这是我的国家({
名声
});
}
}
render（）{
返回{this.state.reputation？.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”}
}
}

在渲染此组件之前，请确保您有一个窗口，以检测是否存在窗口对象。我会为此写一个钩子：

function hasWindow() {
  const [isWindow, setIsWindow] = React.useState(false);

  React.useEffect(() => {
    
    setIsWindow(true);

    return ()=> setIsWindow(false);
  }, []);

  return isWindow;
}

在父组件中，检查是否存在窗口对象：

function Parent(){
  const isWindow = hasWindow();
  if(isWindow){
    return <Reputation />;
  }
  return null;
}

函数父函数（）{
常量isWindow=hasWindow（）；
如果（isWindow）{
返回；
}
返回null；
}

如果您不希望在构建时将组件捆绑到主js文件中，请使用

可加载组件

安装可加载组件，并将其用作要使用仅客户端软件包的组件的包装器

import React，{Component}来自“React”；
从“@Loadable/component”导入可加载文件；
const LoadableReputation=可加载（（）=>
导入（“../components/Reputation”）
);
常量父项=（）=>{
返回(
);
};
导出默认父对象；

那么，您想只在客户端渲染它吗？@Peter yep-我不想在部署时烧掉值

import React, { Component } from "react";
import Loadable from "@loadable/component";

const LoadableReputation = Loadable(() =>
  import("../components/Reputation")
);

const Parent = () => {
  return (
    <div>
      <LoadableReputation />
    </div>
  );
};

export default Parent;