渲染視圖中的多個按鈕反應本地編程

Question

要呈現基於JSON的 { 「操作類型」按鈕：[{ 「現場」：「按鈕」， 「FieldText」：「否」， 「FieldAction 「：」this.getCellNumber（'no'）「， 」style「：」「 }，{ 」Field「：」Button「， 」FieldText「：」No「， 」FieldAction「：」this。 getCellNumber（ '是'）」， 「風格」： 「」 }]}

我怎麼能循環它重nder函數獲取視圖中按鈕的數量

render(){ 
    return(

     <View style={this.styles.ButtonValContainer}> 

     </View> 
); 

} 

Answer 1

您可以輕鬆地收集用於渲染的元素數組。

const buttons = [ 
    { 
     text: 'button one', 
     action:() => console.log('pressed button one'), 
    }, 
    { 
     text: 'button two', 
     action:() => console.log('pressed button two')    
    } 
]; 

....

// react class definition 

// ... 
// assuming `Button` is a defined class in scope. 

render() { 
    const renderedButtons = buttons.map(b => { 
    return <Button key={b.text} text={b.text} onPress={b.action} />; 
    }); 

    return (
    <View> 
    {renderedButtons} 
    </View> 
) 
} 

希望有點幫助。

Answer 2

您可以遍歷列表並在回調中返回一個組件。唯一的要求是，返回的組件有一個key屬性，它被重新描繪時所使用的陣營內部（這樣它就知道該怎麼刪除/移位/更新等）

render() { 
    return(
    <Wrapper> 
     {items.forEach(function(item) { 
     return (
      <View style={this.styles.ButtonValContainer} key={'UNIQUE_KEY_HERE'}> 
      ... 
      </View> 
     ); 
     })} 
    </Wrapper> 
); 
} 

這裏有更多的一些信息：https://facebook.github.io/react/docs/multiple-components.html