將道具傳遞給React中的子組件（TSX文件）

我正在使用VS2013並獲取使用React（0.14）和Typescript（1.8.5）的現有項目。我的React代碼可以正常工作，因爲JSX文件。我在我的新TSX文件中出現了一個我找不到的錯誤。將道具傳遞給React中的子組件（TSX文件）

我有30個多錯誤，在每一個道具粘貼下來的樹組成部分 - 所有這些閱讀：

住宅「nameOfProp」上鍵入「IntrinsicAttributes不存在& IntrinsicClassAttributes> & {} & {孩子？：Reac ...'。

這是一個示例代碼，它讓TypeScript感到不安。任何幫助將不勝感激，因爲這是在生產中使用React啓動和運行的最後一道障礙之一。注：我沒有將有關應用程序的狀態信息，以節省空間，但紅線僅在子組件的名稱（過濾器，名稱，編號，計數）

var App = React.createClass({ 
 
    render: function() { 
 
    render (
 
     <FilterItem 
 
     filter={this.state.artifactFilter} 
 
     count={this.state.count} 
 
     id={this.state.id} 
 
     name={this.state.name} 
 
     /> 
 
    ) 
 
    } 
 
}); 
 
var FilterItem = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <span>{this.props.name} ({this.props.count})</span> 
 
) 
 
} 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>

來源

2016-09-22 Simon

簽名爲React.createClass是：

function createClass<P, S>(spec: ComponentSpec<P, S>): ClassicComponentClass<P>;

通用P和S定義道具和狀態。
編譯器不知道這些類型是什麼，所以它使用的是您在錯誤中獲得的類型。

你可以這樣做：

interface AppState { 
    filter: string; 
    count: number; 
    id: string; 
    name: string; 
} 
var App = React.createClass<{}, AppState>(...); 

interface FilterItemProps { 
    count: number; 
    name: string; 
} 
var FilterItem = React.createClass<FilterItemProps, {}>(...);

如果您使用的類：

class App extends React.Component<{}, AppState> { 
    render() { 
     ... 
    } 
}

來源

2016-09-22 19:09:04

非常感謝！我曾經嘗試過使用界面，但並不正確。這現在起作用。所以沒有辦法讓道具定義寬鬆？即使我非常高興有一個非類型安全的TSX文件，我也必須始終做一個接口聲明？ – Simon

對於'T，S'，你總是可以使用'any，any'，但是你會失去類型安全性。在這種情況下，編譯器無法推斷出正確的類型。在我看來，使用類更容易，更可讀，更合理，然後添加泛型也不會覺得多餘。 –

將道具傳遞給React中的子組件（TSX文件）

回答

相關問題