React组件间数据传递报错排查及实现方法咨询

错误原因 #

TypeScript 无法识别子组件 SearchResults 接受 setSearchResultProps 这个 props，本质是组件的 Props 类型声明没有被正确关联，导致 TypeScript 认为子组件的 Props 是空类型 {}，因此抛出属性不存在的错误。

修复步骤与代码示例 #

1. 修复子组件的类型绑定与方法调用 #

子组件需要明确将自定义的 Props 接口传递给 Component 的泛型参数，同时修复调用方法时缺少参数的问题：

// SearchResults.tsx
import React, { Component } from 'react';

// 定义子组件接受的Props类型
interface SearchResultsProps {
  setSearchResultProps: (result: any) => void;
}

// 绑定Props类型到Component泛型
class SearchResults extends Component<SearchResultsProps> {
  someFunction = () => {
    // 调用父组件传递的方法时，传入符合类型要求的数据
    this.props.setSearchResultProps({ id: 1, content: "搜索结果示例" });
  };

  render() {
    return (
      <div>
        {/* 添加触发按钮，用于测试数据传递 */}
        <button onClick={this.someFunction}>向父组件传递数据</button>
      </div>
    );
  }
}

export default SearchResults;

2. 优化父组件的类型声明（可选） #

父组件的逻辑本身没问题，可给 Component 添加泛型声明，让类型检查更严谨：

// ParentComponent.tsx
import React, { Component } from 'react';
import SearchResults from './SearchResults';

// 泛型参数：第一个是空Props，第二个是State类型
class ParentComponent extends Component<{}, { searchResult: any | null }> {
  constructor(props: {}) {
    super(props);
    this.state = {
      searchResult: null,
    };
  }

  setSearchResult = (result: any) => {
    console.log('test setSearchResult ');
    this.setState({ searchResult: result });
    // 打印收到的数据，验证传递是否成功
    console.log("父组件收到数据：", this.state.searchResult);
  };

  render() {
    return (
      <div>
        <SearchResults setSearchResultProps={this.setSearchResult} />
      </div>
    );
  }
}

export default ParentComponent;

功能说明 #

修改完成后，点击子组件的按钮，会触发 someFunction，调用父组件传递的 setSearchResultProps 方法，将数据传递给父组件并更新父组件的 state，完成子组件向父组件传递数据的功能。

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