Öğeleri nasıl React-native içinde döngü ve render?

Question

Render fonksiyonunda özdeş bir bileşen döngü yapmak mümkün mü? Böyle

şey:

... 

onPress =() => { 
... 
}; 

initialArr = [["blue","text1"],["red","text2"]]; 
buttonsListArr = []; 

for (let i = 0; i < initialArr.length; i++) 
{ 
buttonsListArr.push(
    <Button style={{borderColor:{initialArr[i][0]}}} onPress={this.onPress.bind(this)}>{initialArr[i][1]}</Button> 
); 
} 

... 

render() { 
    return (
    <View style={...}> 
    {buttonsListArr} 
    </View> 
)}; 

bu bileşenlerin sadece sonlu liste demek, bu yüzden ListView/scrollview vb gibi herhangi bir bileşen bu özel durumda uygulanamaz. Bu sadece sözdizimi sorusu.

Answer 1

Genellikle bu tür şeyler için harita kullanmak. Bir tarafı olarak

buttonsListArr = initialArr.map(buttonInfo => (
    <Button ... key={buttonInfo[0]}>{buttonInfo[1]}</Button> 
); 

ben yerine bir nesne kullanmak istiyorsunuz, (oluşturulan bileşen için benzersiz bir tanımlayıcı olmak. anahtar ihtiyaçlarını tepki olarak size eşleme yapmak her tuş gerekli bir prop) bir dizi. Nasıl göründüğünü bulmak daha güzel:

initialArr = [ 
    { 
    id: 1, 
    color: "blue", 
    text: "text1" 
    }, 
    { 
    id: 2, 
    color: "red", 
    text: "text2" 
    }, 
]; 

buttonsListArr = initialArr.map(buttonInfo => (
    <Button ... key={buttonInfo.id}>{buttonInfo.text}</Button> 
); 

Answer 2

render() { 
    return (
    <View style={...}> 
     {initialArr.map((prop, key) => { 
     return (
      <Button style={{borderColor: prop[0]}} key={key}>{prop[1]}</Button> 
     ); 
     })} 
    </View> 
) 
} 

olarak o zaman endeksler endişesi olmayacak hile ilk dizisi için

Answer 3

yerine dizinin daha iyi kullanılması nesnesini yapmalıyım ve öyle de olacak çok daha net neyi ne:

gerçek haritalama için

const initialArr = [{ 
    color: "blue", 
    text: "text1" 
}, { 
    color: "red", 
    text: "text2" 
}]; 

yerine döngü için JS dizisi haritayı kullanabilirsiniz - hiçbir gerçek dizisi belli num şey görüntülendiği gibi, tanımlı olduğunda döngü durumlarda kullanılmalıdır için kez ber:

onPress =() => { 
    ... 
}; 

renderButtons() { 
    return initialArr.map((item) => { 
     return (
      <Button 
       style={{ borderColor: item.color }} 
       onPress={this.onPress} 
      > 
       {item.text} 
      </Button> 
     ); 
    }); 
} 

... 

render() { 
    return (
     <View style={...}> 
      { 
       this.renderButtons() 
      } 
     </View> 
    ) 
} 

Dışarıda daha okunabilir kod için bir yöntem işlemek ayrı fonksiyona eşleştirmesini taşındı. yapmanız gereken yaptıklarımıza bağlı Orada döngü birçok yolu yerli tepki elemanların listesi içinde olduğu ve hangi yolu kullanacağız. Bu yolların çoğu this article about React JSX loops'da ele alınmıştır ve React örneklerini kullanmasına rağmen, bunlardan her şey React Native'de kullanılabilir. Bu konuyla ilgileniyorsanız lütfen kontrol edin!

Ayrıca

değil döngü üzerinde konuyla ilgili ama zaten onPress işlevini tanımlamak için dizi sözdizimi kullandığınız olarak yeniden bağlamak için gerek yoktur. Bu, yine de, işlevin bu sözdizimi kullanılarak tanımlanması durumunda geçerlidir, çünkü ok sözdizimi otomatik olarak işlevi bağlar.