javascript - 为什么连接的 react-redux 组件不能作为正常功能工作，而是作为反应子组件工作？

Question

我正在尝试创建一个外部功能组件，它不需要返回任何 JSX，而只需要将一些内部 React 状态发送到 Redux 存储。为了保持App.js清洁，我试图在外部文件中执行此操作。出于某种原因，下面的代码（其中ChromeStoreToReduxStore呈现为子组件）不会引发错误。

ChromeStoreToReduxStore.js

import { connect } from 'react-redux';
import * as actions from '../popupRedux/actions'

function ChromeStoreToReduxStore (props) {
  console.log(props)

  return null
}

export default connect(null, actions)(ChromeStoreToReduxStore);

应用程序.js

function App (props) {

  //state to keep track of local chrome store
  const [chromeStore, updateChromeStore] = useState({})

  ...
  console.log(ChromeStoreToReduxStore)

 ...
  return (
    <div className="App">
      <ChromeStoreToReduxStore chromeStore = {chromeStore} />
    </div>
  );
}

export default App

但是，App.js像下面这样调用组件会出现以下错误：TypeError: ChromeStoreToReduxStore is not a function

//whenever local store state changes send to redux store
  useEffect(() => {
    ChromeStoreToReduxStore(chromeStore);
  }, [chromeStore])

下面console.log显示它似乎是一个反应备忘录。谁能解释为什么我不能connect像普通函数一样调用这个函数，以及为什么它似乎必须被渲染为一个 React 子？

我知道我可以连接到里面的商店，App.js但想知道为什么上述方法不起作用。

标签： javascriptreactjsreduxreact-redux