React-window: htmlテーブル要素の使用

これが実際に機能するとは思わない。 私の知る限り、 HTMLTableElementは、ウィンドウコンポーネントが必要とするようなオーバーフローを実際にはサポートしていません。 スタイルをdisplay: block変更することはできますが、それでも正しく機能するとは思いません。 （これが例です。）

なぜテーブルが必要なのですか？ インラインブロックまたはフレックスレイアウトで同じ列レイアウトを実現できると思います。

追加事項のカップル：

• requireパラメータwidthからList指定していません
• 行にkeyを追加する必要はありません
• itemSizeは、 () => 30ではなく30にすることができます（パフォーマンスはわずかに向上します）

早速のお返事ありがとうございます。
divへの書き換えについてはすでに説明しましたが、これは既存のかなり大きなコンポーネント用であるため、書き換えを開始する前に確認したかっただけです。 rc-tableについて他にもコメントがあったので、うまくいくはずだと思いました。
とにかく、書き直しを気にしないでください、それは私が思う価値があるはずです。

行にキーがないキーについてReactの警告が表示されました。これは、itemKeyを設定していることを考えると混乱を招き、そこで何が起こっているのかわかりません。

ありがとう

エイナル

2018年9月21日には、午前16時52分で、ブライアン・ヴォーンの[email protected]は書きました：

これが実際に機能するとは思わない。 私の知る限り、HTMLTableElementは、ウィンドウコンポーネントが必要とするようなオーバーフローを実際にはサポートしていません。 表示するスタイルを変更することもできます：ブロックですが、それでも正しく機能するとは思いません。

なぜテーブルが必要なのですか？ インラインブロックまたはフレックスレイアウトで同じ列レイアウトを実現できると思います。

追加事項のカップル：

リストに必須パラメーター幅を指定していません
行にキーを追加する必要はありません
itemSizeは、（）=> 30ではなく30にすることができます（パフォーマンスがわずかに向上します）
—
スレッドを作成したため、これを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。

行にキーがないキーについてReactの警告が表示されました。これは、itemKeyを設定していることを考えると混乱を招き、そこで何が起こっているのかわかりません。

これは予期されていません。 （コードサンドボックスを介して）再現ケースを私と共有できますか？

ああ、ごめんなさい。 itemKey関数が一部のアイテムに対してundefinedを返した場合にのみ、これが予想されることを追加する必要があります。その場合、その関数を修正する必要があります。

@bvaughnオーバーフローサポートが制限要因であることに具体的なことは何も見つかりません。 不思議なことに、それが何であるか知りたいのですが。 確かに、両方のコア機能をサポートするのは面倒かもしれませんが、現時点では、基本リスト要素だけが実装者の選択から外れているように見えます。 私自身と、固定ヘッダーシナリオでreact-windowを使用している可能性のある人なら誰でも、テーブルレイアウトに組み込まれた固有の表形式のサポートを取得するとよいでしょう。 displayの使用：tableは「いくらかの」開発オーバーヘッドを必要とし、偶然にテーブルを使用して構築される可能性のある周囲のアプリケーション向けの1回限りのレイアウトです。 私はいつでもcssを介してオーバーフローや他のプロパティを微調整することができました（とにかく現在の実装でそれを行っています）。 elementTypeプロップは問題外ですか？

@bvaughnオーバーフローサポートが制限要因であることに具体的なことは何も見つかりません。

おそらく私は最高の言い回しを使用していませんでしたが、リンクしたサンドボックス（ rrn61wkzwm ）を見ると、予期しない動作が見られます。

これはHTMLだけの別の例です： lx65871p69

HTMLSelectElement （ <tbody> ）は、 heightやoverflowなどのスタイルを無視するため、ウィンドウ処理には使用できません。 表示モード（ display: block ）を変更することでこれを「修正」できますが、列のサイズ変更動作が損なわれるため、 HTMLTableElementを使用する目的が無効になります。

サイズは列のコンテンツに依存するため（ユーザーがスクロールすると変化するため）、ウィンドウのユースケースでは、そもそもその列のサイズ設定の動作は壊れています。

しかし、現時点では、基本リスト要素だけが実装者の選択から外れているように見えます... elementTypeプロップは問題外ですか？

本当に必要な場合は（ 2j0z718mwy ）、タグタイプをすでに指定できますが、何が得られるかはわかりません。

私自身と、固定ヘッダーシナリオでreact-windowを使用している可能性のある人なら誰でも、テーブルレイアウトに組み込まれた固有の表形式のサポートを取得するとよいでしょう。

HTMLTableElementを使用すると、上記で説明した理由で問題が発生します。 ヘッダーが固定された表形式/グリッドレイアウトが必要な場合は、通常のリストコンポーネントの1つを使用してこれを実現できます： pk78pvwnkx

なぜテーブルが必要なのですか？ インラインブロックまたはフレックスレイアウトで同じ列レイアウトを実現できると思います。

アクセシビリティのためにテーブル構造が必要なのかもしれません（たとえば、非セマンティックdivと比較してより良い画面読み上げ）？ 私はここで推測しています。

この場合、CSSの表示スタイルやテーブル要素に固有の他のスタイルをオーバーライドします。

約9年前に複雑なテーブルコンポーネント（上下に固定/固定された見出し、複雑なcolspan / rowspan構造、およびその背後にある構造を説明するデータモデルを含む）を構築した私の経験（当時はReactも、アクセシビリティの懸念もありませんでした仮想化がないことを覚えている限り）このコンポーネントを担当した同僚は、適切なテーブル要素にコンポーネントを実装しようとし、レイアウトを特定の方法で動作させるのに苦労し、から純粋なJavaScriptでテーブルレイアウトを実装することにしました。絶対に配置され、サイズ設定されたdiv。 そのソリューションは完全に機能しました。奇妙なレイアウトジャンプ、スムーズなスクロール（行ごと/列ごとではない）などはありません。

アクセシビリティのためにテーブル構造が必要なのかもしれません（たとえば、非セマンティックdivと比較してより良い画面読み上げ）？ 私はここで推測しています。

これにはAriaの役割を使用できます😄

超徹底、ありがとうございます。 ある問題を解決して他の問題を作成するだけのプロトタイプを試すために、うさぎの穴を下って行くのを助けてくれました。

こんにちは
新しいスレッドを作成する代わりに、既存のスレッドを見つけようとしました。 私は良い場所にいることを願っています...

FixedSizeGrid 2つのセルをマージする一種の「colspan」を持つ方法はありますか（私のコンテキストではおそらくもっと意味があります）？
この質問は、ここで始まった別の議論に依存してい

FixedSizeGridの2つのセルをマージするための一種の「colspan」を持つ方法はありますか（私のコンテキストではおそらくもっと意味があります）？

いいえ。これはサポートされていません。

@einarq @BlaineBradbury @sompylasarまだ興味がある場合は、テーブルタグを使用してウィンドウ処理を行うことができました。 実際、react-windowをラップするライブラリを作成することになりました。 ここでライブデモを見ることができます： https ：

テーブルタグが欲しかったのは、主にスタイリングのためでした。 通常のhtmlテーブルのスタイリングはtw-bootstrapを使用すると非常に簡単なので、ウィンドウテーブルでも同じことをしたいと思いました。

私はブライアンにタグを付けて、この実装についてどう思うか尋ねたくなります（彼はhtmlテーブルタグが機能しないと言ったので）。 しかし、彼はすでに私を十分に助けてくれました。 だから私はあなたたちにそれを任せます。

ありがとうございました。

それは興味深いアプローチ@pupuduです。 ヘッダーと行に別々の<table>タグを付けることでアクセシビリティの懸念があるかどうかはわかりませんが、そうでない場合は適切なアイデアです。

react-datasheetをreact-windowと一緒に使用しようとしていますが、基本的には機能します。

function sheetRenderer(props) {
  const Row = ({ index, style }) => (
    React.cloneElement(props.children[index], { style })
  );
  return (
    <table className={props.className}>
        <tbody>
          <FixedSizeList
              height={150}
              itemCount={1000}
              itemSize={35}
              width={300}
          >
            {Row}
          </FixedSizeList>
        </tbody>
    </table>
  )
}

export default function EntityTable(props: IEntityTableProps) {
  const initialGrid = useMemo(() => {
    return getTableGridFromCSV(props.entityListCSV);
  }, [props.entityListCSV]);
  const [modifiedGrid, updateModifiedGrid] = useImmer(initialGrid);
  return (
    <ReactDataSheet
      data={modifiedGrid}
      sheetRenderer={sheetRenderer}
      valueRenderer={cell => cell.value}
      onCellsChanged={changes => {
        updateModifiedGrid(draft => {
          changes.forEach(({ cell, row, col, value }) => {
            draft[row][col].value = value || '';
          });
        });
      }}
    />
  );
}

function getTableGridFromCSV(csv: string) {
  return csv.split('\n').map(row =>
    row.split(',').map((cell, index) => {
      if (index === 0) {
        return {
          value: cell,
          forceComponent: true,
          component: <button onClick={() => console.log(cell)}>{cell}</button>,
        };
      }
      if (index === 2) {
        return {
          value: cell,
        };
      }
      return {
        value: cell,
        component: <span>{cell}</span>,
      };
    }),
  );
}

レンダリングされます。唯一の問題はWarning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. index.js:1437 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.

ねえ、私はReact-Tableでこれを試していますが、テーブル要素の代わりにdivを使用する必要があることに気づきました。 これに関する問題は、material / bootstrapのようなスタイリングライブラリがこれらの要素に依存していることです。 したがって、テーブルスキーマをテーブル要素ではなくdivに変更するのははるかに手間がかかります。 テーブル要素を使用して差分をとることは可能ですか、それとも今すぐ独自のスタイルを作成する必要がありますか？

@simkessyすでに気づいていない限り、ウィンドウテーブルをチェックアウトする必要があります。 htmlテーブルタグを使用できるため、既存のスタイルを再利用できます。 ただし、テーブルはreact-tableほど高度ではないことを認める必要があります。
https://window-table.netlify.com/

@pupudu私はあなたのオープンソースの努力を

非常に小さなコードと多くの創造性でこれを実現することができたことがわかりました。 コードは非常に単純なので、誰でもコピー/貼り付けして好みに合わせて拡張できます。 @bvaughnは、方法を理解した後、必要に応じてライブラリに追加するのは非常に簡単ですが、方法を知っている場合はオーバーライドするのも非常に簡単です。

それの不足：

• レンダリング後の最初の行の「トップ」スタイルをキャプチャします
• その値をReact.Contextに保存して、渡せるようにします
• 行自体ではなく、移動されるテーブルコンポーネントに値を適用します
• ヘッダーやフッターなどのスロットを追加します。
• ライブラリの人間工学では物事をきちんと渡すことができないため、React.Contextはコンポーネント間のコミュニケーションを克服するためのヒーローです。

作業コードサンドボックス： https ：

参照用コード

import React from 'react'
import { useState, useRef, useContext } from 'react'
import { FixedSizeList, FixedSizeListProps } from 'react-window'
import { render } from 'react-dom'

/** Context for cross component communication */
const VirtualTableContext = React.createContext<{
  top: number
  setTop: (top: number) => void
  header: React.ReactNode
  footer: React.ReactNode
}>({
  top: 0,
  setTop: (value: number) => {},
  header: <></>,
  footer: <></>,
})

/** The virtual table. It basically accepts all of the same params as the original FixedSizeList.*/
function VirtualTable({
  row,
  header,
  footer,
  ...rest
}: {
  header?: React.ReactNode
  footer?: React.ReactNode
  row: FixedSizeListProps['children']
} & Omit<FixedSizeListProps, 'children' | 'innerElementType'>) {
  const listRef = useRef<FixedSizeList | null>()
  const [top, setTop] = useState(0)

  return (
    <VirtualTableContext.Provider value={{ top, setTop, header, footer }}>
      <FixedSizeList
        {...rest}
        innerElementType={Inner}
        onItemsRendered={props => {
          const style =
            listRef.current &&
            // @ts-ignore private method access
            listRef.current._getItemStyle(props.overscanStartIndex)
          setTop((style && style.top) || 0)

          // Call the original callback
          rest.onItemsRendered && rest.onItemsRendered(props)
        }}
        ref={el => (listRef.current = el)}
      >
        {row}
      </FixedSizeList>
    </VirtualTableContext.Provider>
  )
}

/** The Row component. This should be a table row, and noted that we don't use the style that regular `react-window` examples pass in.*/
function Row({ index }: { index: number }) {
  return (
    <tr>
      {/** Make sure your table rows are the same height as what you passed into the list... */}
      <td style={{ height: '36px' }}>Row {index}</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  )
}

/**
 * The Inner component of the virtual list. This is the "Magic".
 * Capture what would have been the top elements position and apply it to the table.
 * Other than that, render an optional header and footer.
 **/
const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer, top } = useContext(VirtualTableContext)
    return (
      <div {...rest} ref={ref}>
        <table style={{ top, position: 'absolute', width: '100%' }}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

/**
 * Render Our Example
 **/
render(
  <VirtualTable
    height={300}
    width="100%"
    itemCount={1000}
    itemSize={36}
    header={
      <thead>
        <tr>
          <th>Index</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
    }
    row={Row}
    footer={
      <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
        </tr>
      </tfoot>
    }
  />,
  document.querySelector('main')
)

@jamesmfriedmanアプローチが大好きです。 これを達成するためにコンテキストを使用するための本当に興味深いアイデア。 ヘッダー用とボディ用の2つをレンダリングする私のアプローチとは異なり、テーブルを1つだけレンダリングするという事実が気に入っています。 これは、ウィンドウテーブルのユーザーに多くの混乱を引き起こしました（それが来るのを見ていませんでした）。

よろしければ、これらのアイデアをウィンドウテーブルで使用してみます。 最大の課題は、コンテンツに基づいて行のサイズを自動化する方法を見つけることだと思います（これは、少なくともwindo-tableの最大の課題でした）。

非常に有望に見える@jamesmfriedman 。 @bvaughnこのアプローチについて何か懸念はありますか？

@jamesmfriedmanヘッダーがコンテンツと一緒に上にスクロールするようです。 べたつくことはできますか？

実際には可能であり、この実装に固有のものではありません。 HTMLテーブル要素を使用してスティッキーヘッダーをグーグルで検索するだけです。 これを行う方法は、実際にはTH要素の位置を固定することであると漠然と思い出します。

スティッキーヘッダの👍それは多くがここに@marink助けたあなた例えば@jamesmfriedmanおかげでたくさんは一例ですhttps://codesandbox.io/s/react-window-with-table-elements-jj70eあなたが追加する必要がstyle={{ position: 'sticky', top: 0 }}>からthタグ

@jamesmfriedman例をありがとう。 私はそれを使用することを検討するつもりです。 しかし、 topを再計算してテーブル要素に絶対位置を設定する代わりに、

したがって、79行目は<table style={{ top: 0, position: 'sticky', width: '100%' }}>

これにより、一番下にいるときにスクロールを続ける場合のスクロールの問題も修正されます。

HTMLテーブルを使用するもう1つの理由は、IE11をサポートすることです。 FixedSizeListを使用して、CSSグリッドでスタイルを設定しています。 ただし、レスポンシブ列やサイズの異なる列などの他の機能を追加し、すべてをIE11と連携させる必要がある場合は、大量のコードが必要になります。 HTMLテーブルはデフォルトでコードなしで機能します。

IE11はもうサポートすべきものではありません:)

すべてのFE開発者は、IE11の死を望んでいます。 しかし、残念ながら、私たちが想像することさえできない理由のために行動を起こすことができない、それに固執している企業/人々がいます。 うまくいけば、それはほんの数年先のことです。 それまでは、好むと好まざるとにかかわらず、IE11をサポートする必要があります。

私にとっても飲み込むのは難しい薬でした。

@ olafur164高速スクロールでスティッキーヘッダーが壊れないように修正してございます。 スムーズに反対するように一度に1行ずつスクロールするので、「スティッキー」な外観を維持する方法があるかどうか知っていますか？

私の経験をreact-virtualized （ react-windowの問題ページでも）と同じ問題が発生するmaterial-tableと呼ばれるいくつかのマテリアルUIライブラリ（仮想化とテーブル要素の組み合わせ）で共有しましょう： https ： validateDOMNesting(...)警告など、まだいくつかの問題があります。

@jamesmfriedmanはあなたの例に感謝します👍それは大いに役立ちましたthタグにstyle={{ position: 'sticky', top: 0 }}>を追加する必要があります

@JCofmanさん、CSS修正を試しましたが、機能しません。 コードサンドボックスの例は次のとおりです-https：//codesandbox.io/s/react-window-with-table-elements-forked-huti6？file = / src / index.tsx：514-542

2つの問題があります-

1. スタイルが設定されているにもかかわらず、ヘッダーが上部に貼り付いていません。
2. 上方向に大きくスクロールしている間、ヘッダーが点滅/ちらつきます。
   [再現手順-50％下にスクロールしてから、上に高速スクロールしてヘッダーの動きを観察します]。

前もって感謝します ：）

@jamesmfriedmanアプローチが大好きです。 これを達成するためにコンテキストを使用するための本当に興味深いアイデア。 ヘッダー用とボディ用の2つをレンダリングする私のアプローチとは異なり、テーブルを1つだけレンダリングするという事実が気に入っています。 これは、ウィンドウテーブルのユーザーに多くの混乱を引き起こしました（それが来るのを見ていませんでした）。

よろしければ、これらのアイデアをウィンドウテーブルで使用してみます。 最大の課題は、コンテンツに基づいて行のサイズを自動化する方法を見つけることだと思います（これは、少なくともwindo-tableの最大の課題でした）。

行にdisplay: contentsを使用してdisplay: gridを使用しているため、非常によく似た解決策を見つけることになりました。したがって、基本的にtable > tr要素の制約に従います。

context + refsを使用して内部メソッドを呼び出しましたが、最初の子のstyle.top値を検索することで同じことができるため、これはまったく不要です。

const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer } = useContext(VirtualTableContext)
    const {style} = children[0].props;
    return (
      <div {...rest} ref={ref}>
        <table style={style}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

スタイルプロップは、各行に対してcreateElementを実行するときにライブラリによって提供され、特定のRowコンポーネントはstyleをtrに割り当てないため、そうではありません。どちらかを渡します。

最近、こんなことを考えていました。 cssカスタムプロパティを介して疑似要素（後/前）を使用してパディングでテーブル本体全体を移動するとどうなりますか🤔

反応仮想を使用する例では、 https：//codesandbox.io/s/poc-react-virtual-table-jyz0mになり

必要なUXを実現するためにテーブルが絶対に必要でしたが、 react-windowで機能させるための回避策に満足できません

結局、私は自分で仮想化ロジックをフックに抽出し、2つのテーブルを使用して実装しました。1つはヘッダー用で、もう1つはコンテンツ用です。 私のアプローチの違いは、2番目のテーブルにはまだマークアップにヘッダーがありますが、アクセス可能なままであるように視覚的に非表示になっているのに対し、最初のテーブルのヘッダーは目の見えるユーザーのためだけにあり、位置的に固定されていました。コードは大幅に単純化されました。

誰かがそれを試したい場合に備えて、それを捨てるだけです。

@piecykこれは素晴らしいもので、virtuosoの実装方法と非常によく似ています： https ： //virtuoso.dev/grouped-by-first-letter/

コンテナ全体をabsolute / topで配置することはパフォーマンスが高いことを追加する必要がありますが、Chromeでパフォーマンス監査を実行すると、FPSに影響を与える可能性のあるCLSの問題が発生します。 影響は目立たないと思います。この例では、 https ：

私はこれを自分で試みて、近いうちに違いを測定します。

@pupudu私はあなたのオープンソースの努力を

非常に小さなコードと多くの創造性でこれを実現することができたことがわかりました。 コードは非常に単純なので、誰でもコピー/貼り付けして好みに合わせて拡張できます。 @bvaughnは、方法を理解した後、必要に応じてライブラリに追加するのは非常に簡単ですが、方法を知っている場合はオーバーライドするのも非常に簡単です。

_それの不足_：

• レンダリング後の最初の行の「トップ」スタイルをキャプチャします
• その値をReact.Contextに保存して、渡せるようにします
• 行自体ではなく、移動されるテーブルコンポーネントに値を適用します
• ヘッダーやフッターなどのスロットを追加します。
• ライブラリの人間工学では物事をきちんと渡すことができないため、React.Contextはコンポーネント間のコミュニケーションを克服するためのヒーローです。

作業コードサンドボックス： https ：

参照用コード

import React from 'react'
import { useState, useRef, useContext } from 'react'
import { FixedSizeList, FixedSizeListProps } from 'react-window'
import { render } from 'react-dom'

/** Context for cross component communication */
const VirtualTableContext = React.createContext<{
  top: number
  setTop: (top: number) => void
  header: React.ReactNode
  footer: React.ReactNode
}>({
  top: 0,
  setTop: (value: number) => {},
  header: <></>,
  footer: <></>,
})

/** The virtual table. It basically accepts all of the same params as the original FixedSizeList.*/
function VirtualTable({
  row,
  header,
  footer,
  ...rest
}: {
  header?: React.ReactNode
  footer?: React.ReactNode
  row: FixedSizeListProps['children']
} & Omit<FixedSizeListProps, 'children' | 'innerElementType'>) {
  const listRef = useRef<FixedSizeList | null>()
  const [top, setTop] = useState(0)

  return (
    <VirtualTableContext.Provider value={{ top, setTop, header, footer }}>
      <FixedSizeList
        {...rest}
        innerElementType={Inner}
        onItemsRendered={props => {
          const style =
            listRef.current &&
            // @ts-ignore private method access
            listRef.current._getItemStyle(props.overscanStartIndex)
          setTop((style && style.top) || 0)

          // Call the original callback
          rest.onItemsRendered && rest.onItemsRendered(props)
        }}
        ref={el => (listRef.current = el)}
      >
        {row}
      </FixedSizeList>
    </VirtualTableContext.Provider>
  )
}

/** The Row component. This should be a table row, and noted that we don't use the style that regular `react-window` examples pass in.*/
function Row({ index }: { index: number }) {
  return (
    <tr>
      {/** Make sure your table rows are the same height as what you passed into the list... */}
      <td style={{ height: '36px' }}>Row {index}</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  )
}

/**
 * The Inner component of the virtual list. This is the "Magic".
 * Capture what would have been the top elements position and apply it to the table.
 * Other than that, render an optional header and footer.
 **/
const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer, top } = useContext(VirtualTableContext)
    return (
      <div {...rest} ref={ref}>
        <table style={{ top, position: 'absolute', width: '100%' }}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

/**
 * Render Our Example
 **/
render(
  <VirtualTable
    height={300}
    width="100%"
    itemCount={1000}
    itemSize={36}
    header={
      <thead>
        <tr>
          <th>Index</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
    }
    row={Row}
    footer={
      <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
        </tr>
      </tfoot>
    }
  />,
  document.querySelector('main')
)

これをありがとう、誰かがこれをInfiniteLoaderコンポーネントで（成功して）使用しようとしましたか？...私はそれを蹴ってみましたが、内側の「ラッパー」に問題があります。無限ローダーが予期しない小道具をinnerElementTypeに渡しているためだと思います。