React FixedDataTable duyarlı satır/hücre boyutu

Question

Sabit Veri Tablosunu tanımlarken, satır yüksekliğini rowHeight özelliğini kullanarak belirlersiniz. Ancak, cell içeriğinin çok büyük olması durumunda statik bir değer (ör., 50 piksel yüksek) ayarlayarak, yükseklik açıkça ayarlandığından kesilir. rowHeightGetter geri arama işlevi olduğunu görüyorum, ancak bu işlevin argümanları herhangi bir alaka düzeyine sahip görünmüyor (belki de aldıkları satır olabilir mi? Ne tür bir anlam ifade eder, ancak belirli bir sütunun verileriyle ilgili hiçbir şey veya cell).

Bu yüzden merak ediyorum, cell'un içerdiği verilere yanıt veren (hatta bir şekilde) olması için herhangi bir yol var mı?

var Table = FixedDataTable.Table, 
    Column = FixedDataTable.Column, 
    Cell = FixedDataTable.Cell; 

var rows = [ 
    ['a1', 'b1', 'c1'], 
    ['a2', 'b2', 'c2'], 
    ['a3', 'b3', 'c3'], 
    // .... and more 
]; 

ReactDOM.render(
    <Table 
    rowHeight={50} 
    rowsCount={rows.length} 
    width={500} 
    height={500} 
    headerHeight={50}> 
    <Column 
     header={<Cell>Col 1</Cell>} 
     cell={<Cell>Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content </Cell>} 
     width={200} 
    /> 
    <Column 
     header={<Cell>Col 3</Cell>} 
     cell={({rowIndex, ...props}) => (
     <Cell {...props}> 
      Data for column 3: {rows[rowIndex][2]} 
     </Cell> 
    )} 
     width={200} 
    /> 
    </Table>, 
    document.getElementById('CustomDataTable1') 
); 

Bu basit bir örnek ama bunu çalıştırdığınızda/eğer, ilk sütunun hücrenin içeriği kesilmiş olur ve içinde bulunan başka ne görmek yasak olduğunu göreceksiniz.

Şimdi bu konuda bir süredir kafamı duvara çarpıyordum ve bana yardımcı olacak hiçbir şey bulamadım. Başka bir şey kullanmam gerektiğini düşünmeye başladım. Herhangi bir ipucu veya tavsiye sunabilir mi?

thnx

, Christoph

Answer 1

Değişken, işlenen içerik tabanlı satır yükseklikleri, sonsuz kaydırma ve uygun performansı aynı anda bir araya zor şartlar vardır. Sabit Veri Tablosu, büyük tabloların hızlı oluşturulması ve kaydırılması için optimize edilmiştir. Bunu verimli bir şekilde desteklemek için, veri kümesindeki her sıranın ne kadar uzunluğunu oluşturduğunu bilmesi gerekir (ve ideal ve en hızlı durum her satırın aynı önceden tanımlanmış yüksekliğe sahip olduğu yerdir).

Eğer gerçekten sonsuz kaydırmaya ihtiyacınız varsa, her satırın sadece dizinden ne kadar büyük olduğunu öğrenmelisiniz. Ben mesela dayalı mantıklı gerekli yüksekliğe tahmin (el, tek başına, bir ekran dışında düz html tabloya satır render ve ne kadar yüksek ölçüm (ve sonucu önbelleğe), ya da belki daha basit bir algoritma kullanarak bu yöntemi uygulamak sanırım içerikte). Daha önce denediğim gibi, eski yaklaşımın özellikle iyi performans göstermesi mümkün değil.

Sonsuz kaydırmaya gerek duymuyorsanız, Sabit Veri Tablosunu bırakın ve içeriğe dayalı satır yüksekliğinizi iyi bir şekilde işleyebilecek düz bir HTML < çizelgesi oluşturun (istediğiniz CSS'yi kullanarak istediğiniz gibi).

Son seçenek, bunu kılmış sonra otomatik her satırın yüksekliği dayalı kaydırma konumunu kendini ayarlayan muhteşem kendinden ayarlı sonsuz kaydırma tablo bileşeni uygulamaktır. İyi şanslar (bence bu mümkün!)

Answer 2

Bu yazar, link numaralı yazıda, rowDiskMount olayı üzerinde React.getDOMNode(). OuterHeight yoluyla satır yüksekliğini kontrol etmenizi önerir. Belki buna göre satır yüksekliğini ayarlamak için rowHeightGetter geri arama ile bu bilgileri birleştirebilirsiniz.

rowHeightGetter geri arama here kullanarak bir örnek var.