容器组件上不存在 ref

Question

我正在尝试通过父组件的连接组件（容器）从子组件调用 function。

当我尝试引用子组件时，我收到错误Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<{ results: {}[]; }, never>'. Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<{ results: {}[]; }, never>'.

对不起，即将出现的代码墙，我试图尽可能地修剪代码。

这是父组件：

imports...

class App extends React.Component {
    searchBoxRef = createRef<SearchBox>();

    resetTextBox() {
        console.log("It's happening!")

        // if (this.searchBoxRef.current) {
        //     this.searchBoxRef.current.clearInput();
        // }
    }

    render() {
        return (
            <div>
                <div className="grid-container">
                    <div className="header">
                        <SearchBoxContainer ref={this.searchBoxRef} />
                    </div>
                    <FacetboxContainer resetAll={this.resetTextBox} />
                    <ResultsContainer/>
                </div>
            </div >
        )
    }
}

export default App;

容器组件：

imports...

function getReturnType<RT>(expression: (...params: any[])=>RT): RT {
    return {} as RT;
}          

declare type SearchDispatchActions = FacetsAction | SuggestionsAction | InputAction

const mapDispatchToProps = (dispatch: redux.Dispatch<SearchDispatchActions>) => {
    return {
        *dispatch items*
    }
}

function mapStateToProps(state: Store.SearchState) {
    return {
        *props*
    }
}

export const stateProps = getReturnType(mapStateToProps);
export const dispatchProps = getReturnType(mapDispatchToProps);

export type PropsType = typeof stateProps & typeof dispatchProps;
type State = {};

const SearchBoxContainer = connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(SearchBox);

export { SearchBoxContainer }

最后是 Searchbox 组件

imports...

export type State = {
  searchInput: string;
};

class SearchBox extends React.Component<PropsType, State> {
  constructor(props: PropsType) {
    super(props);
    this.state = { searchInput: "" };
  }

  private searchRef = React.createRef<HTMLInputElement>();

  ...

  render() {
    ...

    return (
        ...
    );
  }
}

export default SearchBox;

谢谢您的帮助。

Answer 1

您担心发布太多代码，但实际上我认为您提供的代码还不够多！ 我不确定您是如何执行clearInput()以及为什么需要对SearchBox中的HTMLInputElement进行引用，因为我认为您可以通过设置state.searchInput来清除输入。

带参考

'IntrinsicAttributes & Pick<{ 结果：{}[]; 类型上不存在属性 'ref' }，从不>'。

此错误告诉您无法将 prop ref传递给组件SearchBox ，因为ref未定义为 prop。 您可以：

1. 允许SearchBox通过使用forwardRef function 创建ForwardRefExoticComponent来获取ref属性。
2. 在任何其他道具名称下传递一个RefObject 。

如果最终 ref 是HTMLInputElement ，您可以在App中创建 ref 并通过名为inputRef的 prop 将其传递。

inputRef = useRef<HTMLInputElement>();

<SearchBoxContainer inputRef={this.inputRef} />

export type PropsType = typeof stateProps & typeof dispatchProps & {
  inputRef: React.RefObject<HTMLInputElement>
}

但是，如果我们开始直接从App操作输入的value ，同时该值也由SearchBox的state控制，您将开始明白为什么这是一个糟糕的设计模式。

没有参考

为什么我们不完全放弃 refs 并将输入文本的 state提升到App中？ 现在SearchBox没有组件 state，它通过 props text和onChangeText处理所有内容。

class App extends React.Component<{}, State> {
  state = { searchInput: "" };

  resetTextBox() {
    console.log("It's happening!");
    this.setState({ searchInput: "" });
  }

  render() {
    return (
      <div>
        <div className="grid-container">
          <div className="header">
            <SearchBoxContainer
              text={this.state.searchInput}
              onChangeText={(text) => this.setState({ searchInput: text })}
            />
          </div>
          <FacetboxContainer resetAll={this.resetTextBox} />
          <ResultsContainer />
        </div>
      </div>
    );
  }
}

export type PropsType = typeof stateProps & typeof dispatchProps & {
  text: string;
  onChangeText(text: string): void;
};

class SearchBox extends React.Component<PropsType> {
  render() {
    return (
      <input
        value={this.props.text}
        onChange={(e) => this.props.onChangeText(e.currentTarget.value)}
      />
    );
  }
}