容器組件上不存在 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)}
      />
    );
  }
}