用react中创建组件的方法生成计划表

首先，我们需要安装React和相关的依赖项，可以使用以下命令进行安装：

npm install --save react react-dom react-scripts

接下来，我们可以创建一个名为`Schedule`的组件，并在该组件中定义我们的计划表。以下是一个基本的计划表组件的示例代码：

import React from 'react';

class Schedule extends React.Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>时间</th>
            <th>任务</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>8:00 AM</td>
            <td>吃早餐</td>
          </tr>
          <tr>
            <td>9:00 AM</td>
            <td>上班</td>
          </tr>
          <tr>
            <td>12:00 PM</td>
            <td>吃午餐</td>
          </tr>
          <tr>
            <td>1:00 PM</td>
            <td>工作</td>
          </tr>
          <tr>
            <td>6:00 PM</td>
            <td>下班</td>
          </tr>
          <tr>
            <td>7:00 PM</td>
            <td>晚餐</td>
          </tr>
          <tr>
            <td>10:00 PM</td>
            <td>睡觉</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

export default Schedule;

在这个组件中，我们使用了`<table>`元素来创建一个表格，并使用`<thead>`和`<tbody>`元素将表头和表格内容分开。我们还使用了`<th>`和`<td>`元素来定义表头和单元格。最后，我们将该组件导出以便在其他组件中使用。

当我们在其他组件中使用`Schedule`组件时，我们可以简单地在渲染函数中调用该组件：

import React from 'react';
import Schedule from './Schedule';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>我的计划表</h1>
        <Schedule />
      </div>
    );
  }
}

export default App;

在这个示例中，我们在`App`组件中引入了`Schedule`组件，并将其作为子元素添加到`<div>`元素中。这将导致`Schedule`组件在`App`组件中被渲染出来。