在React中绘制矩形，可以使用HTML5的<canvas>元素结合React组件的生命周期方法来实现。以下是一个简单的React组件示例，用于绘制矩形：

import React, { Component } from 'react';
 
class Rectangle extends Component {
  componentDidMount() {
    this.drawRectangle();
  }
 
  drawRectangle = () => {
    const canvas = this.refs.canvas;
    const ctx = canvas.getContext('2d');
 
    // 设置矩形的属性
    const x = 50;
    const y = 50;
    const width = 200;
    const height = 100;
    const fillColor = 'blue';
 
    // 绘制矩形
    ctx.fillStyle = fillColor;
    ctx.fillRect(x, y, width, height);
  };
 
  render() {
    return (
      <canvas ref="canvas" width="300" height="200" />
    );
  }
}
 
export default Rectangle;

<canvas>元素被定义在Rectangle组件的render方法中，并通过ref属性引用。在组件的componentDidMount生命周期方法中，我们调用drawRectangle方法来绘制矩形。drawRectangle方法首先获取canvas上下文，然后设置矩形的位置、大小和填充颜色，并使用fillRect方法绘制矩形。