如何动态添加更多组件 React Native

我想在单击按钮后添加更多组件。您可以分享代码或想法以便我可以实施吗？如图所示，每次用户单击添加按钮时，都会添加一行/组件。

这是哪里state https://facebook.github.io/react-native/docs/state.html闪耀的,

例如：

constructor(props) {
   super(props);

   this._handleAddButton = this._handleAddButton.bind(this);

   this.state = {    /* initial your state. without any added component */
      data: []
   }
}

_handleAddButton() {
    let newly_added_data = { title: 'new title', content: 'new content goes here' };

    this.setState({
        data: [...this.state.data, newly_added_data]
    });
}

render() {
    let added_buttons_goes_here = this.state.data.map( (data, index) => {
        return (
            <MyComponent key={index} pass_in_data={data} />
        )
    });

    return (
        <View>
            <Button title="Add more" onPress={this._handleAddButton} />
            {added_buttons_goes_here}
        </View>
    );
}

所以每次你点击按钮时，

1. _handleAddButton 被调用
2. 添加了新数据，更新为设置状态() https://facebook.github.io/react/docs/react-component.html#setstate
3. render() https://facebook.github.io/react/docs/react-component.html#render被触发。
4. more <MyComponent>添加到视图并显示

===============

2017/8/3 编辑：

如果你想进一步删除<MyComponent>, 道具key https://facebook.github.io/react/docs/lists-and-keys.html#keys应该得到照顾。这key作为反应框架的变化检测器，自动增量键将适合您的情况。例子：

_handleAddButton() {
    let newly_added_data = {
        /* psedo code to simulate key auto increment */
        key: this.state.data[this.state.data.length-1].key+1,
        title: 'new title',
        content: 'new content goes here'
    };

    this.setState({
        data: [...this.state.data, newly_added_data]
    });
}

_handleRemoveButton(key) {
    let result = this.state.data.filter( (data) => data.key !== key );

    this.setState({
        data: result,
    });
}

render() {
    let added_buttons_goes_here = this.state.data.map( (data, index) => {
        return (
            <MyComponent key={data.key} pass_in_data={data}>
                /// psedo code of pass-in remove button as a children
                <Button title="Remove" onPress={ () => this._handleRemoveButton(data.key) } />
            </MyComponent>
        )
    });

    return (
        <View>
            <Button title="Add more" onPress={this._handleAddButton} />
            {added_buttons_goes_here}
        </View>
    );
}