Для начала забудем о react и поговорим о javascript: javascript риусет ui в одном потоке, потому while - это атомарная операция. На экране ничего не отобразится пока while не закончит своё действие. Т.е. выведя 10 строк через while - ты сразу увидишь их на экране, они не будут появляться по одной. Если, конечно, не подключишь асинхронность с async и await внутри цикла.
Теперь к react: отображение нескольких строк осуществляется с помощью массива:
const lines = [1, 2, 3];
return lines.map(line => (
<p> {line} </p>
));
Если ты хочешь, чтоб при клике добавлялась строчка, то состояние этого массива надо отслеживать, т.е. напримр положить его в state:
function Component() {
const [lines, setLines] = useState([1, 2, 3]);
const addLine = useCallback(() => {
setLines(lines => [...lines, lines.length+1])
});
return(
<>
<button onClick={addLine} className="button">
addLine
</button>
{lines.map(line => (
<p> {line} </p>
))}
</>
}
Если ты хочешь, чтоб при клике постепенно добавлялась 10 строчек с задержкой, то это можно сделать с помощью
setTimeout(тут я обернул его в
Promise для простоты и наглядности):
const delay = (ms) => new Promise(r => setTimeout(r, ms))
function Component() {
const [lines, setLines] = useState([]);
const addLines = useCallback(async () => {
let i = 0;
while(i++ < 10) {
await delay(1000);
setLines(lines => [...lines, i])
}
});
return(
<>
<button onClick={addLines} className="button">
addLine
</button>
{lines.map(line => (
<p> {line} </p>
))}
</>
);
}
Простой