在 React 中将一个单独的 div 附加到另一个组件中

Question

我创建了一个带有输入框的注释，但我不知道如何将注释附加到输入框的 div 中。输入框位于 CreateArea.jsx 内的 CreateArea 函数中，带有道具和布局的 Note 函数位于 Note.jsx 中，并且这两个文件都导出到 App.jsx。输入框和日历位于具有网格布局的容器 div 内。首先是 CreateArea.jsx 的返回码：

return (
    // Container with the Grid-Layout
    <div className="container">
    
    // Code for the static MUI Calendar
    <ThemeProvider theme={themeCalendar}>
    <div className="calendar">
      
      <LocalizationProvider dateAdapter={AdapterDayjs}>
      
      <StaticDateTimePicker
        slotProps={{actionBar : {actions : []}}}
        orientation="landscape"
        value={value}
        onChange={test} 
      />
      </LocalizationProvider>
    </div>
    </ThemeProvider>
    
    // Code for the MUI Datetimefield
    <ThemeProvider theme={themeInputbox}>
      <div className="formarea">
      <form className="create-note">
          
      <LocalizationProvider dateAdapter={AdapterDayjs}>
      
      <DateTimeField
        label=""
        value={value}
        onChange={test}
        slotProps={{ textField: { variant: 'standard'} }}
        
      />
      
       </LocalizationProvider>
        // Inside this Textarea I write the Todo
        <textarea
          name="content"
          onChange={handleChange}
          value={note.content}
          placeholder="write a note..."
          rows="3"
        />
        // Add icon to add the Todo with the Date and time
        <Fab color="primary" onClick={submitNote}><AddIcon/></Fab>
        
      </form>
      </div>
      </ThemeProvider>
    </div>
  );
}

export default CreateArea;

Note.jsx 现在：

 return (
    // The Note-div with the props
    <div className="note">
      <h1>{props.date}</h1>
      <p>{props.time}</p>
      <p>{props.content}</p>
      //Delete a Note-Icon
      <button onClick={handleClick}>
        <DoneIcon />
      </button>
    </div>
    
  );
}

最后是 App.jsx：

return (
      <div>
      <Header />
      // In the App-Component all Notes get mapped into a Todo-List
      <CreateArea onAdd={addNote}/>
      {notes.map((noteItem, index) => {
        return (
          <Note
            key={index}
            id={index}
            date={noteItem.date}
            time={noteItem.time}
            content={noteItem.content}
            onDelete={deleteNote}
          />
        );
      })
      }
      <Footer />
    </div>  
  );
  
}

export default App;

这里我向您展示我想要将创建的注释放置在左侧浮动的网格：

我想将注释放在左下角的网格区域内。我尝试了 grid-area 命令，但它不起作用，因为 note-div 不在输入区域和日历的 div 内。然后我尝试了很多东西但没有任何效果。我研究了一个解决方案，但变得更加困惑，而且它似乎对我的情况不起作用。

我真的很感激任何解决方案，也许还有一些解释。

我尝试了很多事情，但没有任何结果。看来我错过了一些对 React 的基本了解...

Answer 1

最简单的方法是在 Note.js 文件中写入以下内容：