Reactjs 如何添加更多组件以动态响应本机

单击按钮后，我想添加更多组件。你能分享代码或想法让我实现吗？如图所示，每次用户单击“添加”按钮时，都会添加一行/组件。

这就是

例如：

构造函数（道具）{
超级（道具）；
this.\u handleAddButton=this.\u handleAddButton.bind（this）；
this.state={/*初始状态。不添加任何组件*/
数据：[]
}
}
_手动按钮（）{
让新添加的数据={title:'newtitle'，content:'newcontent go here'}；
这是我的国家({
数据：[…this.state.data，新添加的数据]
});
}
render（）{
让我们在这里添加按钮=this.state.data.map（（数据，索引）=>{
返回(
)
});
返回(
{在这里添加了按钮}
);
}

所以每次你点击按钮

_手动按钮被呼叫

将添加新数据，并使用更新

被触发

更多

添加到视图和显示中

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

2017年8月3日编辑：

如果要进一步删除

，则应注意该道具。

键

充当react框架的更改检测器，自动递增键将适合您的情况。例如：

\u handleAddButton（）{
让新添加的数据={
/*psedo代码，用于模拟关键点自动增量*/
key:this.state.data[this.state.data.length-1].key+1，
标题：“新标题”，
内容：“这里有新内容”
};
这是我的国家({
数据：[…this.state.data，新添加的数据]
});
}
_手柄拆卸按钮（钥匙）{
让result=this.state.data.filter（（数据）=>data.key！==key）；
这是我的国家({
数据：结果，
});
}
render（）{
让我们在这里添加按钮=this.state.data.map（（数据，索引）=>{
返回(
///作为子级传入移除按钮的psedo代码
这个。_handleRemoveButton（data.key）}/>
)
});
返回(
{在这里添加了按钮}
);
}

我想你可能会问，比如在todo应用程序中添加任务。 我的回答如下。 在开始时，有一个数组作为数据，其中有三个项目存储在组件的状态中，这三个项目显示在屏幕上。然后我使用一个模态从用户那里获取输入，并将该输入存储为组件状态下的newInput。然后我使用一个按钮将newInput添加到handleModalClick函数中的数据中。然后将newInput值添加到数据数组中。数据数组中的所有元素都显示在屏幕上

import React，{Component}来自“React”；
进口{
安全区域视图，
看法
平面列表，
样式表，
文本，
文本输入，
按钮
情态动词
触控高光，
警觉的，
可触摸不透明度
}从“反应本族语”；
从“expo常量”导入常量；
从“uuid/v1”导入uuid；
从“@expo/vector icons”导入{Ionicons}”；
导出类测试扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{
id:1，
标题：“第一项”
},
{
id:2，
标题：“第二项”
},
{
id:3，
标题：“第三项”
}
],
modalVisible:错误，
新输入：“
};
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
handleModalClick=（）=>{
这是我的国家(
{
数据：[…this.state.data，{id:uuid（），标题：this.state.newInput}]
},
这是我的国家({
新输入：“
})
);
};
render（）{
返回(
(
{item.title}
)}
keyExtractor={item=>item.id}
/>
{
警报。警报（“模式已关闭”）；
}}
>
{
这是我的国家({
新输入：文本
});
}}
值={this.state.newInput}
/>
{
this.setModalVisible（！this.state.modalVisible）；
}}
>
{
此.setModalVisible（true）；
}}
>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
marginTop:Constants.statusBarHeight
},
项目：{
背景颜色：“f9c2ff”，
填充：10，
Margin:8，
marginHorizontal:16
},
标题：{
尺寸：18
},
输入：{
边框宽度：2
}
});
导出默认测试

Hi，key:this.state.data[this.state.data.length-1].key+1，没有元素，因此给出错误。可能是自动递增的另一种方式，这是我内联评论的伪代码。您可以简单地检查数据，如果长度为零，则从0开始。诸如此类