在react原生中创建日历组件

import React from "react";

class Calendar extends React.Component {
  render() {
    return (
      <div>
        // 日历界面的HTML结构
      </div>
    );
  }
}

export default Calendar;

render() {
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
            <th>周日</th>
          </tr>
        </thead>
        <tbody>
          {/* 呈现日期的行 */}
        </tbody>
      </table>
    </div>
  );
}

render() {
  const month = this.props.month; // 传递月份的props

  // 生成日期的行
  const rows = [];
  for (let week = 0; week < 6; week++) {
    const days = [];
    for (let day = 0; day < 7; day++) {
      const date = week * 7 + day + 1;
      days.push(<td key={date}>{date}</td>);
    }
    rows.push(<tr key={week}>{days}</tr>);
  }

  return (
    <div>
      <table>
        {/* 省略其他代码 */}
        <tbody>
          {rows}
        </tbody>
      </table>
    </div>
  );
}

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

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 其他内容 */}
        <Calendar month={8} /> {/* 传递月份的prop */}
      </div>
    );
  }
}

export default App;