これで、React.jsを使用して同じ関数を再現できますか？
「React」からReact、{UseState}をインポートします。
「racep-color」から{chromepicker}をインポートします。

関数depthmapvisualizer（props）{
  const {depthmap} = props;

  const [colors、setcolors] = uesestate（[[
    {r：0、g：0、b：255}、
    {r：0、g：255、b：0}、
    {r：255、g：255、b：0}
    {r：255、g：0、b：0}
  ]）;

  const [displaycolorpicker、setDisplayColorpicker] = uesestate（false）;
  const [currentColor、setCurrentColor] = uesestate（{r：0、g：0、b：255}）;

  const getColor =（深さ）=> {
    if（深さ<0.25）{
      return `rgb（0、$ {math.floor（深さ * 1020）}、255）`;
    } else if（深さ<0.5）{
      return `rgb（0、255、$ {math.floor（1020-深さ * 1020）}）`;
    } else if（深さ<0.75）{
      return `rgb（$ {math.floor（深さ * 1020）-255}、255、0）`;
    } それ以外 {
      return `rgb（255、$ {math.floor（1020-深さ * 1020）}、0）`;
    }
  };

  const remarizedepthmap =（depthmap）=> {
    const height = depthmap.length;
    const width = depthmap [0] .length;

    maxdepth = number.min_value;
    mindepth = number.max_value;

    for（i = 0; i <height; i ++）{
      for（let j = 0; j <width; j ++）{
        maxdepth = math.max（maxdepth、depthmap [i] [j]）;
        Mindepth = math.min（Mindepth、depthmap [i] [j]）;
      }
    }

    depthrange = maxdepth -mindepth;

    lemizeddepthmap = [];

    for（i = 0; i <height; i ++）{
      let row = [];
      for（let j = 0; j <width; j ++）{
        深さ=（depthmap [i] [j]  -  mindepth） / depthrangeとします。
        color = getColor（深さ）;
        row.push（color）;
      }
      remarizeddepthmap.push（row）;
    }

    return remarizeddepthmap;
  };

  const handlecolormapselection =（newcolor）=> {
    newcolors = [... colors];
    newcolors.push（newcolor.rgb）;
    setcolors（newcolors）;
    setDisplayColorpicker（false）;
  };

  remurizeddepthmap = remarizepthmap（depthmap）;
  let height = remarizeddepthmap.length;
  width = remarizeddepthmap [0] .length;

  let colorbar = colors.map（（color、index）=> {
    戻る （
      <div key = {color-$ {index}} style = {{backgroundcolor： `rgb（$ {color.r}、$ {color.g}、$ {color.b}）`、height： '20px'、幅： `$ {100 / colors.length}％`}}>
        <div style = {{textalign： 'center'}}> {index} </div>
      </div>
    ）;
  }）;

  imagerows = remarizeddepthmap.map（（row、rowindex）=> {
    imagecells = row.map（（color、cellindex）=> {
      戻る （
        <td key = {cell-$ {rowindex}  -  $ {cellindex}} style = {{backgroundcolor：color、</tr>
）;
}）;

ImageTable =（
<表>
<tbody>
{Imagerows}
</tbody>
</table>
）;

戻る （
<div>
<div style = {{display： 'flex'、alignitems： 'center’}}>
<div style = {{marginright： '10px’}}>深さ</div>
{colorbar}
</div>
<div>
{imagetable}
</div>
<ボタンonclick = {handlecolormapselection}>カラーマップを選択</button>
</div>
）;
}

デフォルトのdepthmapvisualizerをエクスポートします。

このコードは、深度マップを表す2D配列を採取し、各ピクセルが深さ値に基づいて色付けされているテーブルとして視覚化するReactコンポーネントです。コンポーネントは深さ値を正規化し、getColor（）関数を使用して色にマッピングします。正規化に使用されるカラーマップは、「Color Mapの選択」ボタンをクリックしてアクセスしたカラーピッカーを介してユーザーが変更できます。現在のカラーマップは、深度マップの上のカラーバーとして表示されます。

コンポーネントは、Coler Pickerが表示されている（DisplayColorpicker）、現在選択されている色（CurrentColor）の場合、現在のカラーマップ（色）の状態変数を管理するために、React Hook、特にUseState（）を使用します。

コンポーネントは、まず、正規化されたEpthMap（）関数を使用して深度マップを正規化します。これは、マップの最小値と最大深度値を計算し、カラーマップの最小値と最大値にマッピングします。

次に、正規化された深さマップを使用して、getColor（）関数を使用してその正規化された深さ値に基づいて各セルが色付けされるHTMLテーブルを生成します。テーブルの上のカラーバーには、現在のカラーマップの色が表示され、各色のインデックスが対応するセルの中心に表示されます。