Javascript 如何在另一个中创建react元素？

我构建了一个React应用程序，遇到了一个问题：如何根据useState在另一个React元素中创建React元素

我创建了一个稍微简化的示例：

import React, { useState } from 'react';
import Square from './square';

function Chart(props) {

    const [counter, setCounter] = useState(0);

    function increment() {
        setCounter++;
    }

    return (
        <div>
            <button onClick={increment()}>More squares</button>
            <div className="container">
                {
                    //I want to create as much <Square number={counter}/>  as the value of counter
                }
            </div>
        </div>
    );
}

export default Chart;

import React，{useState}来自“React”；
从“./Square”导入正方形；
功能图（道具）{
const[counter，setCounter]=useState（0）；
函数增量（）{
setCounter++；
}
返回(
更多的方块
{
//我想创造尽可能多的计数器值
}
);
}
导出默认图表；

创建它们的数组。例如：

function Chart(props) {
    const [counter, setCounter] = useState(0);

    function increment() {
        setCounter(oldCounter => oldCounter + 1);
    }

    const squares = [];
    for (let i = 0; i < counter; i++) {
      squares.push(<Square number={i} key={i}/>)
    }

    return (
        <div>
            <button onClick={increment}>More squares</button>
            <div className="container">
                {squares}
            </div>
        </div>
    );
}

功能图（道具）{
const[counter，setCounter]=useState（0）；
函数增量（）{
设置计数器（oldCounter=>oldCounter+1）；
}
常数平方=[]；
for（设i=0；i

创建它们的数组。例如：

function Chart(props) {
    const [counter, setCounter] = useState(0);

    function increment() {
        setCounter(oldCounter => oldCounter + 1);
    }

    const squares = [];
    for (let i = 0; i < counter; i++) {
      squares.push(<Square number={i} key={i}/>)
    }

    return (
        <div>
            <button onClick={increment}>More squares</button>
            <div className="container">
                {squares}
            </div>
        </div>
    );
}

功能图（道具）{
const[counter，setCounter]=useState（0）；
函数增量（）{
设置计数器（oldCounter=>oldCounter+1）；
}
常数平方=[]；
for（设i=0；i

从“React”导入React，{useState}；
从“./Square”导入正方形；
导出默认功能图（道具）{
const[counter，setCounter]=useState（0）；
函数增量（）{
setCounter++；
}    
返回(
更多的方块
{
创建正方形（计数器）
}
);
}
函数createSquares（计数器）{
常数平方=[]；
while（柜台）{
squares.push（）；
计数器--；
}
返回方块；
}

从“React”导入React，{useState}；
从“./Square”导入正方形；
导出默认功能图（道具）{
const[counter，setCounter]=useState（0）；
函数增量（）{
setCounter++；
}    
返回(
更多的方块
{
创建正方形（计数器）
}
);
}
函数createSquares（计数器）{
常数平方=[]；
while（柜台）{
squares.push（）；
计数器--；
}
返回方块；
}

你可以看看lodash。有一个函数

times

，它调用函数n次

import times from 'lodash/times'
...

function Chart(props) {

...
    return (
        <div>
            <button onClick={increment()}>More squares</button>
            <div className="container">
                {times(counter, idx => (<Square key={idx} number={counter}) ) />}
            </div>
        </div>
    );
}

从“lodash/次”导入时间
...
功能图（道具）{
...
返回(
更多的方块
{次（计数器，idx=>（}
);
}

---

如果您不想导入整个库，也可以自己编写此函数。

您可以查看lodash。有一个函数

times

，它调用函数n次

import times from 'lodash/times'
...

function Chart(props) {

...
    return (
        <div>
            <button onClick={increment()}>More squares</button>
            <div className="container">
                {times(counter, idx => (<Square key={idx} number={counter}) ) />}
            </div>
        </div>
    );
}

从“lodash/次”导入时间
...
功能图（道具）{
...
返回(
更多的方块
{次（计数器，idx=>（}
);
}

---

如果您不想导入整个库，也可以自己编写此函数。

您尝试了什么，它到底有什么问题？您做过任何研究吗？我尝试过React.createElement（“”）；但它不起作用。我也检查了文档，但没有找到答案。为什么会起作用，更不用说做你想做的事了？为什么混合使用JSX和createElement？我不知道。我很年轻，我对JavaScript和React都是新手。我用我的小知识尝试了一切，让它起作用。你尝试了什么，问题到底是什么用它？你做过研究吗？我试过React.createElement（“”）；但它不起作用。我也检查了文档，但没有找到答案。为什么会起作用，更不用说做你想做的事了？为什么混合使用JSX和createElement？我不知道。我很年轻，对JavaScript和React都不熟悉。我用我的小知识尝试了一切，以使它起作用。如果你使用计数器a，你可以使用枚举s是实例化数组的大小。不是更快，而是更干净的

array（counter）.fill（）.map（（\uu，i）=>）

。或者你可以做

[…array（counter）]

而不是

fill

我对这段代码一无所知…如果它与数组一起工作，我会很高兴：）如果使用计数器作为实例化数组的大小，则可以使用可枚举。速度不是更快，而是更干净的

array（counter）.fill（）.map（（\uu，i）=>）

。或者您可以使用

[…array（counter）]

而不是

fill

我对这段代码一无所知…如果它与数组一起工作，我会很高兴：）