ネイティブに反応する - 動的に要素をDOMに追加ボタンを押す

Question

ネイティブの反応では、ボタンクリックでDOMに要素を動的に追加しようとしています。

これは私がこれまでにレンダリング（）メソッドにしたものである：

<TouchableHighlight 
    style={styles.button} 
    onPress={this.addAnotherRow}> 

     <Text>Add new row</Text> 

</TouchableHighlight> 

私は別のDOM要素を追加したonPress関数から戻ることはよく分からない：

addAnotherRow() { 
    return <Text>New Row</Text> 
} 

助けてください？

Answer 1

これを行うには、配列を設定し、ビュー内の配列をマップするのが良い方法です。 、要素を追加し、配列にアイテムをプッシュすると、アレイの状態をリセットするには：

getInitialState(){ 
    return { rows: [] } 
}, 

_addRow(){ 
    this.state.rows.push(index++) 
    this.setState({ rows: this.state.rows }) 
} 

let rows = this.state.rows.map((r, i) => { 
    return <View key={ i } style={[styles.row, CheckIndex(i)]}> 
       <Text >Row { r }, Index { i }</Text> 
      </View> 
}) 

そして、このような変数を使用します。

<View> 
    { rows } 
</View> 

を私はこれの実施例を設定しましたhereと入力し、以下のコードも貼り付けます。

https://rnplay.org/apps/-ENWEw

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight 
} = React; 

let index = 0 

var SampleApp = React.createClass({ 

    getInitialState(){ 
     return { rows: [] } 
    }, 

    _addRow(){ 
    this.state.rows.push(index++) 
    this.setState({ rows: this.state.rows }) 
    }, 

    render() { 

    let CheckIndex = i => { 
     if((i % 2) == 0) { 
     return styles.gray 
     } 
    } 

    let rows = this.state.rows.map((r, i) => { 
     return <View key={ i } style={[styles.row, CheckIndex(i)]}> 
        <Text >Row { r }, Index { i }</Text> 
       </View> 
    }) 

    return (
     <View style={styles.container}> 
     <TouchableHighlight onPress={ this._addRow } style={styles.button}> 
      <Text>Add new row</Text> 
       </TouchableHighlight> 
     { rows } 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop: 60, 
    }, 
    gray: { 
    backgroundColor: '#efefef' 
    }, 
    row: { 
    height:40, 
    alignItems: 'center', 
    justifyContent: 'center', 
    borderBottomColor: '#ededed', 
    borderBottomWidth: 1 
    }, 
    button: { 
    alignItems: 'center', 
    justifyContent: 'center', 
    height:55, 
    backgroundColor: '#ededed', 
    marginBottom:10 
    } 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp);