Error: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & Pick<ClassAttributes<Layout>&Props, "ref" | "key">'

Question

Error: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & Pick<ClassAttributes & Props, "ref" | "key">'.

我是使用 typescript 学习 reactjs 的新手，我按照 https://www.youtube.com/watch?v=8jHKBAPNtpM 教程进行学习，但该视频中的内容解释不当。 谁能帮我解决这个问题。 我的HomePage.tsx文件

import React, { Component } from "react";
import Layout from "../../components/common/layout";
import Content from "../../components/common/content";
import Home from "./../../components/home";

class HomePage extends Component {
  render() {
    return (
      <div className="wrapper">
        <Layout>
          <Content title="Dashboard">
            <Home />
          </Content>
        </Layout>
      </div>
    );
  }
}

export default HomePage;

我的Layout.tsx文件

import React, { Component } from "react";
import { connect } from "react-redux";

import TopNav from "../topnav";
import Aside from "../aside";
import UserStateInterface from "../../../interfaces/UserStateInterface";
import UserService from "../../../services/UserService";
import { setUser } from "./../../../store/actions";

interface Props {
  user: UserStateInterface;
  setUser: typeof setUser;
}

class Layout extends Component<Props> {
  async componentDidMount() {
    const response = await UserService.getCurrentUserProfile();
    this.props.setUser(response);
  }

  render() {
    return (
      <React.Fragment>
        <TopNav />
        <Aside user={this.props.user} />
        {this.props.children}
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    user: state.user,
  };
};

export default connect(mapStateToProps, { setUser })(Layout);

我的Content.tsx文件

import React, { Component } from "react";

interface Props {
  title: String;
}

class Content extends Component<Props> {
  render() {
    const { title } = this.props;
    return (
      <div className="content-wrapper">
        <section className="content-header">
          <div className="container-fluid">
            <div className="row mb-2">
              <div className="col-sm-6">
                <h1>{title}</h1>
              </div>
              <div className="col-sm-6">
                <ol className="breadcrumb float-sm-right">
                  <li className="breadcrumb-item">
                    <a href="/" onClick={(event) => event.preventDefault()}>
                      Home
                    </a>
                  </li>
                  <li className="breadcrumb-item active">Blank Page</li>
                </ol>
              </div>
            </div>
          </div>
        </section>

        <section className="content">{this.props.children}</section>
      </div>
    );
  }
}

export default Content;

我的Home.tsx文件

import React, { Component } from "react";
import Card from "./../common/card";
import TopCards from "./topcards";
import TodoWrapper from "../todo/todowrapper";

class Home extends Component {
  render() {
    return (
      <React.Fragment>
        <TopCards />
        <div className="row">
          <div className="col-md-6">
            <TodoWrapper />
          </div>
          <div className="col-md-5">
            <Card title="Some content will come" titleIcon="ion-clipboard">
              <p>Content will come.</p>
            </Card>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Home;

Answer 1

您需要告诉 React 该组件已准备好接受子组件。

React 正是为此提供了一个实用程序。只需将 interface Props {...} 替换为 type Props = PropsWithChildren<{...}>.

import { PropsWithChildren } from "react";

type Props = PropsWithChildren<{
  user: UserStateInterface;
  setUser: typeof setUser;
}>;

示例：https://codesandbox.io/s/boring-chatelet-kp5vm?file=/src/Layout.tsx