React 向Component传入并回传自定义复杂类对象（小型数据库类）问题

核心问题梳理 #

• props命名完全不匹配：父级给子组件传的回调prop名叫setData，子组件接口定义的回调是setParentData，子组件内部实际调用的是this.props.setParentLayers，三个名称完全不一致，回调当然无法触发。
• 类方法this未绑定：React类组件的自定义方法默认不会绑定this指向，直接在事件中调用handleChange会导致内部this指向undefined，执行到访问props的逻辑时会直接报错，无法走到回调调用步骤。
• 语法错误：子组件handleChange方法的结尾括号写反了，用了{而不是}，属于语法错误，代码无法正常编译运行。
• 组件名不匹配：父级调用React.createElement时传入的组件是LayerSetup，但你给出的子组件导出名称是MSetup，如果二者不一致会导致渲染的不是目标组件，回调自然不会触发。
• 需求与实现不一致：你需要传递的是dataStructure类的实例，但目前父级传的是dataElement数组，子组件内部自行实例化了类，和你要「从父级传入实例、修改后回传实例」的需求不符。

修复步骤 #

第一步：统一回调prop命名，修正语法和this绑定问题 #

先对齐父子组件的prop名称，同时修正语法和this指向问题：

// 子组件props定义修正
interface Iprops {
  data: dataElement[];
  // 和父级传入的prop名统一为setData
  setData: (x: dataElement[] | dataStructure) => void;
}

export default class MSetup extends React.Component <Iprops, Istate>{
  data: dataStructure;

  constructor(props: Iprops) {
    super(props);
    this.data = new dataStructure(props.data);
    // 方式1：在constructor中绑定handleChange的this指向
    this.handleChange = this.handleChange.bind(this);
  }
    
  // 修正结尾的括号错误，也可以用方式2：类属性箭头函数自动绑定this：handleChange = (i: number, event: React.ChangeEvent<HTMLInputElement>) => {}
  handleChange(i: number, event: React.ChangeEvent<HTMLInputElement>) {
    this.data.setData(i, event.target.value);
    // 调用和父级对齐的prop名
    this.props.setData(this.data.dataVariable);
  }
}

第二步：修正父级组件名称和传参逻辑 #

确认传入的组件名和子组件导出名一致，同时如果需要从父级传入dataStructure实例，调整实例化逻辑即可：

export class ParentLevel {
    public data: dataStructure;
    
    constructor(options: DialogConstructorOptions, initialState: dataElement[]) {
        // 如果需要父级管理实例，在这里提前实例化，后续直接把实例传给子组件即可
        this.data = new dataStructure(initialState);
        // 确认组件名和导出的子组件一致，将之前的LayerSetup替换为实际导出的MSetup
        this.reactRoot = React.createElement(MSetup, { 
          data: initialState, 
          setData: (x: dataElement[]) => this.setData(x)
        });
        this.target = options.element;
        ReactDOM.render(this.reactRoot, this.target);
    }
    
    setData(returnData: dataElement[]){
        // 如果要存储实例，修改入参类型直接接收dataStructure实例赋值即可
        this.data = returnData;
    }
}

内容的提问来源于stack exchange，提问作者wzorn