0

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

当我尝试引用子组件时出现错误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;

谢谢您的帮助。

4

1 回答 1

1

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

带参考

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

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

  1. 允许通过使用函数创建SearchBox一个道具。refForwardRefExoticComponentforwardRef
  2. RefObject在任何其他道具名称下传递 a 。

如果最终的 ref 是一个HTMLInputElement，您可以创建 ref inApp并通过一个名为inputRef.

inputRef = useRef<HTMLInputElement>();

<SearchBoxContainer inputRef={this.inputRef} />

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

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

没有参考

为什么我们不完全放弃 refs 并将输入文本的状态提升到App? 现在SearchBox没有组件状态，它通过 propstext和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)}
      />
    );
  }
}
于 2020-11-05T21:36:53.153 回答