时间戳

首页 > 解决方案 > React：如何在数组中渲染子组件？

javascript - React：如何在数组中渲染子组件？

问题描述

TaskContent 保存在数组中的图像

因此，当我单击“添加任务”时，我的 TaskContent 将作为 TaskGroup 子项保存在数组中。但是我怎样才能在数组中渲染孩子呢？

我的应用程序.jsx

import React, {useState} from "react";
import Header from "./Header";
import AddTaskGroup from "./AddTaskGroup";
import TaskGroup from "./TaskGroup";
import Form from "./Form";
import CreateTask from "./CreateTask";
import TaskContent from "./TaskContent";

function App() {

  // Open Form
  const [isFormOpen, setFormIsOpen] = useState(false);

  function addGroupHandler() {
    setFormIsOpen(true);
  }

  function closeGroupHandler() {
    setFormIsOpen(false);
  }

  // Open Task
  const [isFormTaskOpen, setIsOpenTaskOpen] = useState(false);

  function openFormTaskHandler(){
    setIsOpenTaskOpen(true);
  }

  function closedFormTaskHandler(){
    setIsOpenTaskOpen(false);
  }

  // Add Group Task
  const [groups, setGroups] = useState([]);

  function createGroupTask(newGroup){
    setGroups(prevGroup => {
      return [...prevGroup, newGroup]
    })
  }

  // Add Task
  const [task, setTask] = useState([]);

  function createTask(newTask){
    setTask(prevTask => {
      return [...prevTask, newTask]
    })
  }




  return (
    <div>
      <Header/>
      <AddTaskGroup onAddGroup={addGroupHandler}/>
      {groups.map((groupItem, index) => {
        return <TaskGroup
        key={index}
        title={groupItem.title}
        onAddTask={openFormTaskHandler}
        >
        {task.map((taskItem, index) => {
          return <TaskContent
          key={index}
          content={taskItem.content}
          />
        })}
        </TaskGroup>
      })}

      <Form onAdd={createGroupTask} openGroup={isFormOpen} onCloseGroup={closeGroupHandler}/>
      <CreateTask addTask={createTask} openFormTask={isFormTaskOpen} onCloseFormTask={closedFormTaskHandler}/>
    </div>
  );
}

export default App;

我的 TaskGroup.jsx（TaskContent 的父级）单击右下角的“+”按钮时显示此组任务

import React from "react";
import TaskContent from "./TaskContent";

function TaskGroup(props) {
  return(
    <div className="taskGroup">
      <div className="titleTaskGroup">
        <h4>{props.title}</h4>
      </div>
      <TaskContent taskContent={props.content}/>
      <div className="btnNewTask">
        <button onClick={props.onAddTask}>+</button>
        <p>New Task</p>
      </div>
    </div>
  )
}

export default TaskGroup;

和 TaskContent.jsx（TaskGroup 的子项）我希望在按下新任务按钮时显示此任务内容，并将在任务组中呈现

[import React from "react";

function TaskContent(props) {
  return(
    <div className="contentTaskGroup">
      <p>{props.taskContent}</p>
      <span>...</span>
    </div>
  )
}

export default TaskContent;

标签： javascriptarraysreactjsparent-childchildren

解决方案

在TaskGroup.jsx中，您需要更改：

<TaskContent taskContent={props.content}/>

至：

{props.children}

因为您正在渲染TaskContent为组件App.jsx的子级TaskGroup。通过这种方式，可以渲染从其父组件TaskGroup传递过来的 jsx 。props.children

之后，TaskContent.jsx您需要更改：

props.taskContent

至：

props.content

因为在App.jsx这个道具中被传递为content={taskItem.content}.

推荐阅读