Question

为整个应用程序实现微调组件的最佳实践和有效方法是什么？

我的示例代码：

render() {
  if (this.state.loading)
    return (
      <Spinner/>
    )

  return (
    <div className="container">
  )
}

我想避免为每个组件重写相同的逻辑检查 loading 状态。 TIA。

Answer 1

创建一个utils文件夹并创建一个文件（sppiner.js）在该文件中并编写此代码

spinner.js

export default function spinner({text}) {
  return (
    <div>
      <Spinner/>
      <span>{text}</span>
    </div>
  )

然后在每个要使用微调器的组件中编写此代码

import Spinner from "utils/spinner";

return(
...
{this.state.loading && <Spinner text={"your text..."} />}
...
)

Answer 2

只需应用三元：

import Spinner from './spinner.js';
export default function LoadManager = ({loading}) => props.loading ? <Spinner /> : props.children;

并使其具有功能：

loader.js

render() {
  return 
    <LoadManager loading={this.state.loading}>
      <App />
    </LoadManager>
}

所以在您的组件中

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }

其他更常见的方式涉及使用React Loadable：

{{1}}

这也更加有效，可以拆分代码。

Answer 3

添加这种功能怎么样？

function renderSpinner() {
  return this.state.loading && <Spinner />
}

反应中每个组件的微调器

3 个答案: