Question

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

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)

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

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

Answer 1

与公开整个组件相比，我认为仅将所需的功能公开到外部更为简洁。如果您仍然暴露在外部，则将React组件暴露在React上下文之外没有多大意义-相反，类似ComboBox的东西似乎更像是用于控制应用程序状态的外部函数，这很可能是您需要什么。

基本上，如果要向外部公开某个控制应用程序某些功能的特定函数，则只公开该功能而不是公开应用程序内部的一部分，这样比较干净。

从“外部”访问功能组件的方法

1 个答案: