删除原生反应中的多个组件

我知道如何通过更改状态来添加和删除单个组件。 但是这种方式不会工作，如果你有多个组件要删除。 例如让我说我有3个意见。 当我点击它们时，我怎样才能删除它们。

示例代码：

class Example extends Component { render(){ return ( <View> <View> <TouchAbleOpacity onPress={() => this.removeView()}> <Text>Remove View 1</Text> </TouchAbleOpacity> </View> <View> <TouchAbleOpacity onPress={() => this.removeView()}> <Text>Remove View 2</Text> </TouchAbleOpacity> </View> <View> <TouchAbleOpacity onPress={() => this.removeView()}> <Text>Remove View 3</Text> </TouchAbleOpacity> </View> </View> ) } removeView(){ } } 

另一个例子是当我有一个ListView的button里面。 这些是邀请用户的button。 当我点击button时，我想隐藏ListView中特定行的button。

有什么build议么？

Answer 1

你必须使用你的组件的状态。 无论何时调用setState ，组件的render()函数都会再次触发。 根据目前的状况，你可以决定展示什么，什么不展示。 例如：

 class Example extends Component { constructor(props){ // initialize state this.state = { isView1Visible: true, isView2Visible: true, isView2Visible: true } } render(){ return ( <View> { this.renderView1() } { this.renderView2() } { this.renderView3() } </View> ) } renderView1(){ if(this.state.isView1Visible){ return ( <View> <TouchAbleOpacity onPress={() => this.setState( {isView1Visible: false} )}> <Text>Remove View 1</Text> </TouchAbleOpacity> </View> ) } renderView2(){ if(this.state.isView2Visible){ return ( ... ) } renderView3(){ if(this.state.isView3Visible){ return ( ... ) } } 

在上面的例子中，你根据当前状态渲染你的视图。 点击button时，通过调用setState()来更新状态，就像我之前提到的那样，它会触发另一个调用render() 。

与ListView的方法是一样的，但实现略有不同。 你需要做的是保存你的组件状态的项目列表，并且每当你想添加/删除一个项目时，你相应地更新列表，然后使用setState更新状态。 例如，类似这样的东西：

  constructor(props) { super(props); var list = [ ... ] const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); this.state = { dataSource: ds, items: ds.cloneWithRows(list) }; } render() { return ( <View> <ListView dataSource={this.state.items} renderRow={(rowData) => this.renderRow(rowData) /> } /> </View> ) } renderRow(rowData) { <View> <TouchAbleOpacity onPress={() => this.updateList()}> <Text>Remove View 1</Text> </TouchAbleOpacity> </View> } updateList() { // do some changes to your list and update the state. var newItems = ... this.setState({ items: newItems }) } 

希望这可以帮助。

Answer 2

感谢Giorgos，我为自己的问题find了一个解决scheme。 我在组件内创build了一个带有隐藏function的独立组件。 现在，我可以在视图或列表视图中的任何位置添加此组件，当我点击它时，它将隐藏。 请记住，这只隐藏组件并不会卸载它。

这只是一个例子，所以我创build了一个button组件。

我的button组件：

 class ButtonComponent extends React.Component { constructor(props) { super(props); this.state = { hide:false } } render() { return ( <View style={styles.container}> {this.renderButtonComponent()} </View> ); } renderButtonComponent(){ if(!this.state.hide){ return ( <TouchableOpacity onPress={this.hide.bind(this)}> <Text>Button</Text> </TouchableOpacity> ); } } hide(){ this.setState({ hide:true }); } } 

在我看来，我只是呈现我的组件：

  render() { return ( <View style={styles.container}> <ButtonComponent/> <ButtonComponent/> <ButtonComponent/> </View> ); }