Блог

Главная - Вопросы по программированию - реагирует, самоинкрементируется с помощью цикла

реагирует, самоинкрементируется с помощью цикла

#reactjs

#reactjs

Вопрос:

я пытаюсь создать цикл самостоятельного увеличения числа.

Для provider сброса числа снова начинается с 1 для каждого компонента

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

В настоящее время я вручную добавляю числа в реквизит

результат, который я хочу быть

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

пытался выполнить цикл до конца. Но он возвращает неопределенный цикл

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

Вот демонстрация.
https://codesandbox.io/s/funny-sid-49i1n

Идея состоит в том, чтобы у реквизитов num автоматически были номера приращений.

например.

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

Комментарии:

1. должны ли они быть пронумерованы всегда с 1? или начать с контекста number ?

2. Немного неясно, что вы спрашиваете, поскольку связанный codesandbox точно соответствует тому, что вы говорите, что хотите, чтобы результат был. Вы на самом деле пытаетесь увеличить значение состояния / контекста? Или контекст не имеет значения, и вы просто хотите, чтобы каждый SimpleDiv поддерживал свое собственное увеличенное num состояние? LoopNum также недопустимо использовать перехваты, поскольку это не является ни функциональным компонентом, ни пользовательским перехватом. Каков источник истины для того, с какого числа начинать увеличение?

Ответ №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>

Обновленный codesandbox: https://codesandbox.io/s/fervent-moon-um9s3?file=/src/App.js

Ответ №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