Ne zaman React createFragment kullanılır?

Question

Ben Yerli, bu uyarı Tepki düzeltmek başardı tepki bir ListView render ama ben anlamıyorum nasıl ve neden çalışır:

Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.

// This array generates React Fragment warning. 
var data1 = [{name: "bob"}, {name:"john"}] 

// This array works, no warnings. 
var data2 = [React.addons.createFragment({name: "bob"}), 
      React.addons.createFragment({name: "john"})] 

// This also works, no warnings. 
var data3 = ["bob", "john"] 

class Listings extends React.Component { 
    constructor(props) { 
    super(props) 
    ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) 

    this.state = { 
     dataSource: ds.cloneWithRows(data), 
    } 
    } 
    render() { 
    return (
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(rowData) => <Text>{rowData}</Text>} /> 
    ) 
    } 
} 

bir Fragment Ne Tepki edilir? React'ta ne zaman gereklidir? Anahtarlı bir nesne neden bu uyarıya neden oluyor?

Answer 1

Sorgumda gördüğüm 2 ana noktaya cevap vermek için cevabımı 2 bölüme ayırıyorum.

Bölüm 1: Reaksiyon Parçası Nedir? Bir Fragment olduğunu Tepki açıklamak amacıyla

, yaklaşık Keys Tepki geri adım atmak ve konuşmalıyız.

Tuşlar yardım Hangi öğelerin değiştiğini, eklendiğini veya kaldırıldığını belirleyin. Bir dizi içindeki elemanlara sabit bir kimlik (teklik) vermek için verilmelidir.

Anahtar seçmenin en iyi yolu, kardeşleri arasında bir liste öğesini benzersiz olarak tanımlayan bir dizeyi kullanmaktır. Çoğu zaman verilerinizden kimlikleri anahtar olarak kullanırsınız.

render() { 
    const todoItems = todos.map((todo) => 
     <li key={todo.id}> 
     {todo.text} 
     </li> 
    ); 

    return todoItems; 
} 

O todoItems<li> elemanlı bir dizi gerçekte olduğuna dikkat etmek önemlidir: Burada pratik bir örnek.

Bunun bilincinde olarak, kullanım durumunuzda neden bir uyarı aldığınızı açıklığa kavuşturalım.

Çoğu durumda, yukarıdaki örnekte olduğu gibi, döndürdüğünüz öğelerin anahtarlarını belirtmek için key desteğini kullanabilirsiniz. Ancak, bu durum bir durumda bozulur: Yeniden sıralamanız gereken iki çocuk setiniz varsa, her sete bir sarıcı eleman eklemeden bir anahtar koymanın bir yolu yoktur.

İşte recently updated React docs klasik örnek:

function Swapper(props) { 
    let children; 
    if (props.swapped) { 
    children = [props.rightChildren, props.leftChildren]; 
    } else { 
    children = [props.leftChildren, props.rightChildren]; 
    } 
    return <div>{children}</div>; 
} 

çocuk kaldırmak ve herhangi tuşları çocukların iki set üzerinde işaretlenmiş orada değil çünkü swapped pervane değiştirdikçe remount edecektir.

Bu sorunu çözmek için, çocuk takımlarına anahtar vermek üzere createFragment eklentisini kullanabilirsiniz. Follow the enhanced example, using the createFragment here.

---

Bölüm 2: Neden bu uyarıyı alıyorsunuz?

Her halükarda, hata aldığınız hata, bazı JSX'e bir JavaScript nesnesini (bir JSX öğesi veya dizgisi yerine) enterpole etmeye çalıştığınız için olur.

Hata iletisi, bu sorunu gidermek için createFragment kullanılmasını önermese de, neden bir değişken veya JSX öğesi olmayan bazı JSX'e bir değişkene enterpolasyon yaptığınız içindir, aslında başka bir nesne türüdür!

Kullanım durumunuzda bu tür yanıltıcı bir uyarı var mı?:-)