export default class ParentRenderer extends React.Component {
// constructor with method bindings goes here
changeMapping(e) {
mapping.put(props.data,e.target.value);//unclear on how to declare mappings
}
renderChild(props) {// props passed by Parent
<Child onChange = {(e) => this.changeMapping(e,props)} />
}
sendMappings() {
makeRestCall(mappings);//makeRestCall is imported and makes a post call to specified url
// pass response to ParentRenderer's parent
}
render() {
data = []; //each object represents data for the first column of each row
return(
<div>
<Parent
data = {data} onRender = {this.renderChild}
/>
<button onClick = {this.sendMappings}>Next</button>
</div>
);
}
}
Parent
组件就像一个表,并使用Child
组件呈现每一行。没有给每个孩子提供的ID。最终用户将值输入到每个Child
组件。我在渲染中声明的数据构成了第一列。第二列每行Child
。我想要将第一列中的数据映射到用户输入的数据。如果呈现了n Child
个组件,我想在Next
按钮点击后通过POST调用将这些n个映射发送到后端。props
通过{renderChild
发送给Parent
{1}}它让我可以访问该行第一列中的数据。
我应该如何存储mappings
变量。它是由独立的孩子改变的。我可以使用react-redux
来存储这些映射变量,虽然没有触发状态变化而且孩子不需要重新渲染吗?或者我可以将其变为全局变量吗?我在React文档中读到Context是实验性的,所以我选择不使用它。