ref 在容器组件上不存在

Question

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

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

很抱歉，后面的代码太长了，我尽量trim代码。

这是父组件：

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 }

最后是搜索框组件

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.

有参考文献

Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<{ results: {}[]; }, never>'.

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

允许 SearchBox 通过使用 forwardRef 函数创建 ForwardRefExoticComponent 来获取 ref 道具。
在任何其他道具名称下传递 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 并将输入文本的 lift the state 变成 App？现在 SearchBox 没有组件状态，它通过 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)}
      />
    );
  }
}

ref 在容器组件上不存在

ref does not exist on container component

reactjs

typescript

react-redux

react-forwardref

有参考文献

没有参考文献