Question

使用TypeScript和React / Redux，我键入了一个ConnectedComponent。但是当我尝试渲染该组件时，TypeScript抛出错误，提示未传递所需的道具。

例如

interface Props extends MapStateProps {

}

class App extends React.Component<Props, {}> {
  render(): JSX.Element {
    return (
      <>
        <Router>
          <Switch>
            <Route path="/" component={Dashboard} />
          </Switch>
        </Router>
      </>
    );
  }
}

interface MapStateProps {
  user: UserState;
}

const MapStateToProps = (state: AppState): MapStateProps => ({
  user: state.user,
});

const connectedApp = connect(MapStateToProps, null)(App);

export {
  connectedApp as App,
};

然后当我像这样渲染组件时

<App />

它说App需要“用户”道具。在不将用户属性设置为可选的情况下该如何做？

Answer 1

替换

export {
  connectedApp as App,
};

使用默认导出：

export default connectedApp;

然后导入

import {App} from './App';

对于

import App from './App';

Answer 2

请尝试此操作，看看是否有帮助。

interface UserState{}
interface AppState{
  user: UserState;
}
interface MapStateProps {
  user: UserState;
}
interface Props extends MapStateProps {}

class App2 extends React.Component<Props, {}> {
  render(): JSX.Element {
    return (
      <div>
          App2
      </div>
    );
  }
}

const MapStateToProps = (state: AppState): MapStateProps => ({
  user: state.user,
});

export default connect(MapStateToProps, null)(App2);

Answer 3

这对我有用：

//...

const connectedApp = connect(MapStateToProps, null)(App);

export default connectedApp ;
export { connectedApp as App};

打字稿-渲染连接的组件

3 个答案: