reactjs - Ant Design react - 更改所有组件的默认微调器

Question

我需要一次更改所有组件的默认微调器。我怎样才能做到这一点？

Answer 1

Antd 的 Table 组件有 loading Prop 。通常，加载状态使用一个 bool 值来显示或隐藏Spinner，这是正确的。 但也可以添加对象而不是 bool 值。

单击对象时，它会将您重定向到 Spin Antd component API .

如您所见，<Spinner /> 有多个属性组件，我们可以在 <Table loading={{size: 'large'}} /> 中使用它们.但我们需要的是指标属性，因为它接受 ReactNode。所以，现在剩下的就是添加 <Loader />。来自 react-loader-spinner .

import Loader from "react-loader-spinner";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

const Demo extends React.Component {
  render() {
    const loaderIcon = (
        <Loader type="Puff" color="#00BFFF" height={200} width={200} />
    );
    
    return (
      <Table
        {...this.state}
        loading={{ indicator: loaderIcon }}
        pagination={{ position: [this.state.top, this.state.bottom] }}
        columns={tableColumns}
        dataSource={state.hasData ? data : null}
        scroll={scroll}
      />  
    );
  }
}

对于这么大的代码，我很抱歉，我 fork 了 Antd 示例，然后在其中编辑了一些东西。

Antd Table Dynamic settings code