Как подключиться к компоненту класса без передачи реквизита машинописи

Question

Я начал изучать React с TypeScript и сегодня столкнулся с проблемой - я не могу подключиться к компоненту без передачи данных.

Например,

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 без передачи есть какие-то реквизиты, потому что компонент получит реквизиты, используя соединение с реакцией 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 <{children ?: ReactNode; }>». Возможно, объект не определен.

Как я могу отобразить PostsContainer без передачи данных?

Answer 1

Проблема в том, что вы не указали, какие реквизиты принимает PostsContainer, поэтому по умолчанию предполагается, что он не берет никаких реквизитов. Затем, когда вы пытаетесь использовать mapStateToProps для передачи ему posts prop, машинопись выдает жалобы.

Исправление заключается в обновлении типов для включения в них сообщения prop:

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