将道具传递给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文件）

回答

相关问题