javascript - react 中每个组件的微调器

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

我的示例代码:

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

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

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

最佳答案

制作一个utils文件夹并制作一个文件(sppiner.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..."} />}
...
)

关于javascript - react 中每个组件的微调器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59302772/