React 如何在export的数组中使用hooks

在 React 中，hooks 只能在函数组件或自定义 hooks 中使用，不能在普通的 JavaScript 函数中使用。因此，如果你的数组是一个普通的 JavaScript 函数，那么你是不能在其中使用 hooks 的。

但是，如果数组中的每个元素都是一个函数组件，那么你可以在其中使用 hooks。你可以在每个函数组件中使用 useState、useEffect 或其他 hooks。

例如，下面是一个数组，其中每个元素都是一个函数组件，并且使用了 useState hook：

import React, { useState } from "react";

function Component1() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

function Component2() {
  const [text, setText] = useState("");

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>You typed: {text}</p>
    </div>
  );
}

const components = [Component1, Component2];

function App() {
  return (
    <div>
      {components.map((Component, index) => (
        <Component key={index} />
      ))}
    </div>
  );
}

export default App;

在上面的例子中，我们定义了两个函数组件 Component1 和 Component2，它们分别使用了 useState hook 来管理状态。然后，我们把这两个函数组件放到数组 components 中，并在 App 组件中使用 map 方法来渲染这些组件。这样，我们就可以在数组中使用 hooks 了。