Question

我正在尝试将自定义渲染用于搜索框。我正在使用语义UI响应：0.82.5和Typescript：2.9.1。和Redux /

我遇到以下错误：

Exp = "2019-02-15"

这是我下面的代码的摘录。我在做什么错了？

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>
...

Answer 1

我认为这是因为没有输入您的结果。并且any没有属性name

尝试添加：

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

Answer 2

查看Search.d.ts后，我终于找到了一种使它工作的方法。我将resultRenderer作为道具传递给包含Search小部件的组件。

这是最终的实现方式：

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>
    );
  }
}

语义用户界面反应：React / TypeScript和Redux的自定义搜索问题

2 个答案: