相关疑难解决方法(0)

我正在开发一个使用Typescript,React和Redux(都在Electron中运行)的项目,当我在另一个中包含一个基于类的组件并尝试在它们之间传递参数时,我遇到了一个问题.松散地说,我有容器组件的以下结构:

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

和子组件:

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

显然我只包括基础知识,这两个类还有更多,但是当我尝试运行看起来像有效代码的东西时,我仍然会收到错误.我得到的确切错误:

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

Run Code Online (Sandbox Code Playgroud)

当我第一次遇到错误时,我认为这是因为我没有通过定义我的道具的界面,但是我创建了它(如上所示)并且它仍然不起作用.我想知道,有什么我想念的吗？

当我从ContainerComponent中的代码中排除ChildComponent prop时,它渲染得很好(除了我的ChildComponent没有关键道具)但是在JSX Typescript中拒绝编译它.我认为它可能与基于本文的连接包装有关,但该文章中的问题发生在index.tsx文件中并且是提供者的问题,我在其他地方遇到了问题.

我有一个简单的反应 - 还原动力形式.我希望有一个form.container.tsx和一个form.component.tsx,其中form.container.tsx包含所有与redux状态的连接减去Field的连接.我正在尝试将我的容器包装在react-redux的connect中,然后将reduxForm包装在其中,看起来像TypeScript,redux-form和connect:

(理想)form.container.tsx:

interface DummyFormContainerProps {}

export const DummyFormContainer: React.SFC<DummyFormContainerProps> = props => {
  const submitForm = (formValues: object) => {
    alert(formValues);
  };
  return (
    <DummyForm
      onSubmit={submitForm}
    />
  );
};

const mapStateToProps = (state: State) => ({});
const mapDispatchToProps = (dispatch: object) => {
  return {};
};
const mergeProps = (stateProps: State, dispatchProps: object | null, ownProps: object | void) => 
  Object.assign({}, stateProps, dispatchProps, ownProps);

const formConfiguration = {
  form: 'dummy-form',
  forceUnregisterOnUnmount: true
};

export default connect(mapStateToProps, …