0

假设我想通过从应用程序外部调用该方法来控制我的应用程序的加载状态，如下所示：

setLoading(true)

我已经实现了一个类似的功能组件：

import React from 'react';

function App() {
  const [loading, setLoading] = React.useState(true);
  window.setLoading = (isLoading) => { setLoading(isLoading) };

  if (loading) return 'Loading...';

  return 'App content';
}

然而，我相信映射 setLoading()到window不是最好的方法。那么有可能以不同的方式做吗？

如果我有一个类组件，它看起来像这样：

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
    }
  }

  setLoading = (loading) => {
    this.setState({ loading });
  }

  render() {
    return(this.state.loading ? 'Loading...' : 'App content');
  }
}

然后在渲染时，我将使用回调 ref 使整个组件及其所有方法可用。

<App ref={(app) => { window.app = app }} />

app.setLoading(true)

这种方法也会污染全局范围，但它更简洁 - 组件作为一个整体公开。

由于这两种方法都不是最佳的，我应该使用哪一种？有没有更好的东西？

4

1 回答 1

1

与公开整个组件相比，我认为只向外部公开所需的功能更简洁。如果您无论如何都暴露在外部，那么将 React 组件暴露在 React 上下文之外并没有多大意义——相反，类似的东西window.setAppLoading似乎更像是一个用于控制应用程序状态的外部函数，这可能是您所需要的。

基本上，如果您想向外部公开控制应用程序某些内容的某个功能，那么只公开它比公开应用程序内部的一部分更干净。

于 2020-07-08T11:39:55.333 回答