React：如何在數組中呈現組件子項？

Question

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;

Answer 1

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

<TaskContent taskContent={props.content}/>

至：

{props.children}

因為您將TaskGroup中的TaskContent呈現為App.jsx組件的子級。 通過這種方式， TaskGroup可以渲染從其父組件作為props.children傳遞的 jsx。

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

props.taskContent

至：

props.content

因為在App.jsx中，這個 prop 作為content={taskItem.content}傳遞。