如何在不传递道具打字稿的情况下连接到类组件

Question

我开始使用 TypeScript 学习 React，今天遇到了一个问题 - 我无法在不传递数据的情况下连接到组件。

例如

import React from 'react';
import './App.css';
import Header from './components/Header';
import { PostInterface } from './pages/Posts';
import { Route, Switch } from 'react-router-dom';
import FullPost from './pages/FullPost';
import { BrowserRouter } from 'react-router-dom';
import PostsContainer from './pages/PostsContainer';

const App: React.FC = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path="/">
            <Header image="https://www.linagro.tn/images/slider/slides/1920x400/southern-alps-1920x400.png" text="posts" />
            <PostsContainer />
          </Route>
          <Route path="/posts/:id">
            <Header image="https://www.linagro.tn/images/slider/slides/1920x400/southern-alps-1920x400.png" text="post" />
            <FullPost text="Post" title="It's my post" createdAt={Date.now} author="noname" />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

我想渲染 PostsContainer 而不传递任何道具，因为组件将使用 connect 和 react redux 获取道具

import React, { Component } from 'react'
import { connect } from 'react-redux'
import Posts from './Posts';

class PostsContainer extends Component {
    render() {
        return (
            <Posts posts={this.props.posts} />
        )
    }
}

const mapStateToProps = (state: any) => {
    return {
        posts: state.posts
    }
}

export default connect(mapStateToProps, null)(PostsContainer);

我收到两个错误：

类型'Readonly & Readonly'。 对象可能是“未定义”。

如何在不传递数据的情况下呈现 PostsContainer？

Answer 1

问题是您没有指定 PostsContainer 需要什么样的道具，所以默认情况下它假定它不使用任何道具。然后，当您尝试使用 mapStateToProps 向它传递 posts 道具时，打字稿会抱怨。

修复方法是更新类型以包含一个帖子道具：

interface PostsContainerProps {
  // not sure exactly what the type on the posts prop is, but assuming 
  // you have a Post type defined somewhere, maybe something like:
  posts: Post[],
}

class PostsContainer extends Component<PostsContainerProps> {
  // rest is unchanged