使用打字稿文件中.jsx文件中定義的組件

Question

我們已經購買了一個react主題，目的是在我們的Web應用程序中使用它的組件，最后我們遇到了一些問題，使它們可以進行轉換，我們就解決了。 但是，我們現在遇到類型問題。

我相信這里的問題是打字稿不喜歡道具沒有定義類型並且默認為IntrinsicAttributes。 我希望能夠不經修改就使用這些組件。

錯誤：

(TS) Property 'content' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Card> & Readonly<{ children?: ReactNode; }> & Read...'

home.tsx

import * as React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import Card from './test';

type HomeProps = RouteComponentProps<{}>;

export default class Home extends React.Component<HomeProps, {}> {
    public render() {
        return <div>
            <Card content="but why doesn't this work?" />
        </div>
    }
}

test.jsx

import React, { Component } from 'react';


class Card extends Component {
    render() {
        return <div>
        {this.props.content}
        </div>;
    }

}
export default Card;

Answer 1

我認為您正在嘗試創建一個新屬性，嘗試為測試文件創建一個新接口，並在任何typedefinition文件中定義一個接口，如下所示，

interface Card {
     content: any;
}

謝謝

Answer 2

React默認props和state的類型為{} ，這就是為什么它聲稱此示例中不存在content原因。

也許比實現每個組件的接口更好的方法是執行以下技巧（這不是最漂亮的方法）：

在.tsx文件中：

import OriginalCard from './test';

/* tslint:disable */
const Card: any = OriginalCard; 
/* tslint:enable */

並且您應該能夠使用Card而不會出現錯誤。