求问怎么解决react hooks顺序问题导致子组件十分臃肿的问题

Question

起因

react hooks不能用在条件判断里，导致如果把带有hooks的子组件用到Array.map里面，就会报错。

问题

因此目前的解决办法就是把hooks相关的内容通过参数传递给子组件，但是子组件又有子组件，数据传输比较吃力，每个子组件有很多参数需要传。

想问

想问下有比较好的解决方案吗，让子组件不太臃肿

解决方法限制

1. 函数组件（functionComponent）
2. 不可使用dom

Answer 1

React.createContext 将根组件数据传入，子组件接入。

Answer 2

我试了一下可以用，不报错，代码如下：

const Count = () => {
  const [count, setCount] = useState(0);

  return (
    <Fragment>
      <p>{count}</p>{" "}
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>{" "}
    </Fragment>
  );
};

const Index = () => {

  const arr = [1, 2, 3]
  return (
    <Fragment>
      {
        arr.map((item) => <Count key={item} />)
      }
    </Fragment>
  );
};