javascript - React - 将复杂对象变量传递给 React 组件

Question

我还在学习，我可能错了。

我创建了一个类，它本质上是一个小型数据库，具有创建、删除和修改数据的功能。

我导入这个类并在 React 组件中为它定义一个变量。该组件创建一个带有按钮和所有必要输入元素的交互式表格。这一切都很好，我的表按预期更新、删除和更改。

我刚刚描述的反应组件是一个模式对话框，我需要能够将那个“小型数据库”类变量传入和传出反应组件。

任何指导将不胜感激！

谢谢，威廉

编辑：添加部分工作的代码....

interface Iprops {
  data: dataElement[];
  setParentData: (x: dataElement[]) => void;
}

export default class MSetup extends React.Component <Iprops, Istate>{

  data: dataStructure;

  constructor(props: Iprops) {
    super(props);
    this.data = new dataStructure(props.data);
  }
    
  handleChange(i: number, event: React.ChangeEvent<HTMLInputElement>) {
    this. data.setData(i, event.target.value);
    this.props.setParentLayers(this.data.dataVariable);
  {
}

export class ParentLevel {
    public data: dataStructure;
    
    constructor(options: DialogConstructorOptions, initialState: dataElement[]) {
        this.reactRoot = React.createElement(LayerSetup, { data: initialState, setData: (x: dataElement[]) => this.setData(x)});
        this.target = options.element;
        ReactDOM.render(this.reactRoot, this.target);
    }
    
    setData(returnData: dataElement[]){
    // ***** THIS IS NEVER CALLED WHEN DATA CHANGES
        this.data = returnData;
    }
}

标签： javascriptreactjstypescriptcomponents