Javascript 按按钮复制组件

我想通过单击按钮来创建组件。它起作用了。但生成的组件是由上而下的。我希望它们从左到右

从“antd”导入{Card，Button}；
导入“/Card.css”；
从“react”导入{useState}；
从“/Todo”导入Todo；
const CreateCard=（）=>{
const[todo，setTodo]=useState（[]）；
const addTodo=（事件）=>{
setTodo（todo.concat（））；
}
返回(
创造
{todo}
)
}
导出默认创建卡；

这是一张带有按钮的卡片的代码

从“antd”导入{Card}；
导入“/Card.css”；
常数Todo=（）=>{
返回(
梅哈巴

)
}
导出默认Todo；

这是Todo组件。当我写标签而不是卡片组件时，它按照我的要求工作。但我想从左到右生成一张卡片。我如何才能做到这一点？

使用flex row

import { Card, Button } from "antd";
import "./Card.css";
import { useState } from "react";
import Todo from "./Todo";

const CreateCard = () => {
    const [todo, setTodo] = useState([]);
    const addTodo = (event) => {
        setTodo(todo.concat(<Todo key={todo.length} />));
    }
    return (
        <div>
            <Card hoverable className="card" title="New Project" style={{ width: 300, height: 200 }}>
                <Button onClick={addTodo}>CREATE</Button>
            </Card>

            <div style={{display: "flex", flexDirection: "row"}}>{todo}</div>
        </div>
    )
}
export default CreateCard;

从“antd”导入{Card，Button}；
导入“/Card.css”；
从“react”导入{useState}；
从“/Todo”导入Todo；
const CreateCard=（）=>{
const[todo，setTodo]=useState（[]）；
const addTodo=（事件）=>{
setTodo（todo.concat（））；
}
返回(
创造
{todo}
)
}
导出默认创建卡；

使用弹性行

import { Card, Button } from "antd";
import "./Card.css";
import { useState } from "react";
import Todo from "./Todo";

const CreateCard = () => {
    const [todo, setTodo] = useState([]);
    const addTodo = (event) => {
        setTodo(todo.concat(<Todo key={todo.length} />));
    }
    return (
        <div>
            <Card hoverable className="card" title="New Project" style={{ width: 300, height: 200 }}>
                <Button onClick={addTodo}>CREATE</Button>
            </Card>

            <div style={{display: "flex", flexDirection: "row"}}>{todo}</div>
        </div>
    )
}
export default CreateCard;

从“antd”导入{Card，Button}；
导入“/Card.css”；
从“react”导入{useState}；
从“/Todo”导入Todo；
const CreateCard=（）=>{
const[todo，setTodo]=useState（[]）；
const addTodo=（事件）=>{
setTodo（todo.concat（））；
}
返回(
创造
{todo}
)
}
导出默认创建卡；

您也可以对其使用display:grid

{todo}

您也可以对其使用display:grid

{todo}

我们可以维护计数，而不是将react组件存储在状态中，并根据计数循环生成尽可能多的

Todo

组件

要将它们并排对齐，其中一种方法是使用

display:flex

const{Card，Button}=antd；
const{useState}=React；
常数Todo=（）=>{
返回(
梅哈巴

)
}
const CreateCard=（）=>{
const[noOfTodos，setNoOfTodos]=useState（0）；
const addTodo=（事件）=>{
setNoOfTodos（oldTodo=>oldTodo+1）；
}
返回(
创造
{Array.from（Array（noOfTodos.keys（））.map（todo=>）}
)
}
render（，document.getElementById（“react”）
.todos容器{
显示器：flex；
柔性包装：包装；
}
我们可以维护计数，而不是将react组件存储在状态中，并根据计数循环生成尽可能多的
Todo
组件

要将它们并排对齐，其中一种方法是使用
display:flex


const{Card，Button}=antd；
const{useState}=React；
常数Todo=（）=>{
返回(
梅哈巴

)
}
const CreateCard=（）=>{
const[noOfTodos，setNoOfTodos]=useState（0）；
const addTodo=（事件）=>{
setNoOfTodos（oldTodo=>oldTodo+1）；
}
返回(
创造
{Array.from（Array（noOfTodos.keys（））.map（todo=>）}
)
}
render（，document.getElementById（“react”）
.todos容器{
显示器：flex；
柔性包装：包装；
}

最好使用旧状态，如
setTodo（oldTodo=>oldTodo.concat（））
而不是
setTodo（todo.concat（））
同意，还有很大的改进空间。问题是如何使用CSS垂直放置项目。我认为最好做这样的改进，因为它们很难调试，可能会产生意外的结果。所以，刚才提到了。谢谢你的回复。但组件是以无限的形式并排生成的。如何将其中一些添加到下一行？最好使用旧状态，如
setTodo（oldTodo=>oldTodo.concat（））
而不是
setTodo（todo.concat（））
同意，还有很多改进空间。问题是如何使用CSS垂直放置项目。我认为最好做这样的改进，因为它们很难调试，可能会产生意外的结果。所以，刚才提到了。谢谢你的回复。但组件是以无限的形式并排生成的。我怎样才能把它们中的一些添加到下一行中呢？这将是无止境的。如何在这些代码中排列行？如何在此处排列行和列？因为在你给我的解决方案中，组件是从左到右无限的。你可以在容器中添加
flex-wrap
。我已经用同样的方法更新了答案。它将永远正确。如何在这些代码中排列行？如何在此处排列行和列？因为在你给我的解决方案中，组件是从左到右无限的。你可以在容器中添加
flex-wrap
。我已经用同样的方法更新了答案，但是组件是以无限的方式并排生成的。如何将其中的一些添加到下一行？您尝试过我的解决方案吗？我认为如果一行不能容纳，它会将其中的一部分移到下一行，但组件是以无限的形式并排生成的。如何将其中的一些添加到下一行？您尝试过我的解决方案吗？我认为，如果一行的内容不合适，它会将其中的一些内容移到下一行。