Semantic-ui-реакции: проблема пользовательского поиска с React / TypeScript и Redux

Question

Я пытаюсь использовать пользовательский рендер для окна поиска.Я использую Semantic-UI-реагировать: 0,82,5 с Typescript: 2.9.1.и Redux /

У меня есть следующая ошибка:

Type '{ fluid: true; loading: any; results: { id: number; name: string; team: number; location: string;...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<SearchProps, ComponentState, any>> & Rea...'.
Type '{ fluid: true; loading: any; results: { id: number; name: string; team: number; location: string;...' is not assignable to type 'Readonly<SearchProps>'.
Types of property 'resultRenderer' are incompatible.
Type '({ id, name, team, location, type }: { id: any; name: any; team: any; location: any; type: any; }...' is not assignable to type '(props: SearchResultProps) => ReactElement<any>'.
Types of parameters '__0' and 'props' are incompatible.
Type 'SearchResultProps' is not assignable to type '{ id: any; name: any; team: any; location: any; type: any; }'.
Property 'name' is missing in type 'SearchResultProps'.",

Вот выдержка из моего кода ниже.Что я делаю не так?

const result = [{
  id: 73421,
  name: "cn-sonar-16",
  team: 124,
  location: "RTP",
  type: "sonarqube-account-rep" 
}];

@CSSModules(styles, options)
export class ServicesOverview extends React.Component<any, any> {

  public resultRenderer = ({ id, name, team, location, type }) => 
    <div key='content' className='content'>
      <div> {name}</div>
      <div> {team}</div>
      <div>{location}</div>
      <div >{type}</div>
    </div>;  
...  (omitting code for clarity)
render(){
...
<div styleName="search-container">
                <Search
                  fluid
                  loading={services.searching}
                  results={result}
                  value={services.searchText}
                  onSearchChange={_.debounce(this.handleSearchChange, 500, {
                    leading: true
                  })}
                  onResultSelect={this.handleResultSelect}
                  resultRenderer={this.resultRenderer}
                />
</div>
...

const mapStateToProps = state => {
  return {
    services: state.services,
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ServicesOverview);

Answer 1

Я наконец нашел один способ заставить его работать после просмотра Search.d.ts.Я передаю resultRenderer в качестве опоры компоненту, содержащему виджет поиска.

Вот окончательная реализация:

interface SearchResultProps {
  id: number;
  name: string;
  team: number;
  location: string;
  type: string;
}

interface ServicesOverviewProps {
  resultRenderer: (SearchResultProps) => any;
  ...
}

@CSSModules(styles, options)
export class ServicesOverview extends React.Component<ServicesOverviewProps,any> {
...
<Search
                  fluid
                  loading={services.searching}
                  results={services.searchResult}
                  value={services.searchText}
                  onSearchChange={_.debounce(this.handleSearchChange, 500, {
                    leading: true
                  })}
                  onResultSelect={this.handleResultSelect}
                  resultRenderer={resultRenderer}
                />
...
export default connect<ServicesOverviewProps>(
  mapStateToProps,
  mapDispatchToProps
)(ServicesOverview);

Родительский компонент:

class UserActionWidget extends React.Component<any, any> {
  public render() {
    const resultRenderer = ({ id, name, team, location, type }) => {
      ...

      let image = <img className="image" src={imagePath} />;

      if (!imagePath) {
        image = (
          <Icon size="big" name="question circle" styleName="icon-style" />
        );
      }

      return (
        <div key="content" className="searchResult-container">
          <div className="content-container">
            <div className="image-container" data-title={type}>
              {image}
            </div>
            <div className="searchResult-container-description">
              <div className="total-container">{name}</div>
              <div className="description"> Team: {team}</div>
            </div>
          </div>
        </div>
      );
  };
    
  return (
      <div styleName="widget-container">
        {(() => {
          switch (this.props.type) {
            case "services":
              return (
                <ServicesOverview  resultRenderer={resultRenderer}/>
              );
          })()}
      </div>
    );
  }
}

Answer 2

Я думаю, это потому, что ваш результат не напечатан.и any не имеет атрибута name

попробуйте добавить:

interface Result {
  id: number
  name: string
  team: number
  location: string
  type: string
}

...

public resultRenderer = ({ id, name, team, location, type }: Result) => 

...