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 with 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);

我遇到两个错误：

属性'posts'在'Readonly <{}>和Readonly <{子类型上不存在：ReactNode; }>'。对象可能是“未定义”。

如何在不传递数据的情况下呈现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

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

1 个答案: