用循环反应，自增

Question

我正在尝试做自我编号递增循环。

为每个组件重新设置数字从1开始的provider

   <ContextProvider>
      <SimpleDiv num={"1"} />
      <SimpleDiv num={"2"} />
    </ContextProvider>

我目前正在手动将数字放到道具上。

我想要的结果

block - 1
block - 2
----------------
block - 1
block - 2
block - 3

正试图让to循环通过。但是它返回不定式循环。

const LoopNum = () => {
  const contextNumber = useContext(Context);
  const [number, setNumber] = useState(contextNumber);
  setNumber((num) => num + 1);
  return number;
};

这是演示。https://codesandbox.io/s/funny-sid-49i1n

其思想是使数字道具自动具有增量号。

例如：

const Component1 = () => {
  const newNumber = LoopNum();
  return (
    <ContextProvider>
      <SimpleDiv num={newNumber} />
      <SimpleDiv num={newNumber} />
    </ContextProvider>
  );
};

Answer 1

你可以用React.Children.map和React.cloneElement来做

const ContextProvider = ({ children }) => {
  const numberedChildren = React.Children.map(children, (child, index) =>
    React.cloneElement(child, { num: index + 1 })
  );
  return <Provider value={{ number: 0 }}>{numberedChildren}</Provider>;
};

然后你可以像这样使用它

<ContextProvider>
  <SimpleDiv />
  <SimpleDiv />
</ContextProvider>

更新代码框：https://codesandbox.io/s/fervent-moon-um9s3?file=/src/App.js

Answer 2

您可以创建一个组件，通过传递的循环数来循环返回元素。就像这样：

import React from "react";

const SimpleDiv = ({ num }) => <div>block - {num}</div>;

const LoopComponent = ({ loopNum }) => {
  return [...Array(loopNum)].map((_, index) => (
    <SimpleDiv key={index} num={index + 1} />
  ));
};

export default function App() {
  return (
    <div>
      <LoopComponent loopNum={2} />
      <LoopComponent loopNum={3} />
    </div>
  );
}

工作沙箱：https://codesandbox.io/s/ecstatic-bird-ptxxo