如何解决从位置可变的子代反应更新父代状态
我有一个嵌套的数据结构,希望以以下模式显示在React中:
const BeatSchema = new Schema({
beat_name: String
beat_description: String
});
const ActSchema = new Schema({
act_name: String
act_description: String
beats: [BeatSchema]
});
const BeatSheetSchema = new Schema(
{
beat_sheet_name: String,beat_sheet_description: String,author_username: String,author_id: String,content: {
acts: [ActSchema]
},},);
我可以有任意数量的使徒行传和任意数量的节拍。我的用户界面将每个Act分成自己的一行,每个Act都有自己的Beats。
我希望添加一个组件AddBeat,该按钮是一个按钮,单击该按钮将自动向其Act添加新的Beat。
有关组件外观的示例如下
<BeatSheet />
<Act>
<Beat />
<Beat />
<AddBeat />
</Act>
<Act>
<Beat />
<Beat />
<Beat />
<AddBeat />
</Act>
</BeatSheet>
我的状态当前全部存储在主父组件<BeatSheet>
中。 <Act>
和<Beat>
组件通过道具以其显示值传递。我之所以这样做,是因为有人告诉我,这是一种更“ React-y”的处理方式。
但是,我无法从<AddBeat>
组件更新父状态。这是因为我(a)目前无法从<BeatSheet>
进入<AddBeat>
状态,而(b)即使我这样做,我也不知道向哪个Act添加新的Beat,因为这可能在第一,第二,第三幕等等中。<AddBeat>
当前没有该信息。
我读过嵌套结构在React中并不好,但是我看不到其他选择。我有数量可变的<Act>
和<Beat>
组件,并且我需要可变长度的列表。
在这种情况下,如何从<BeatSheet>
更新<AddBeat>
状态?如何为<AddBeat>
提供在正确的<Beat>
中插入<Arc>
所需的信息?还是有比这更好的解决方案?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。