Question

我正在使用VS2013并将现有项目设置为使用React（0.14）和Typescript（1.8.5）。我的React代码可以正常用作JSX文件。我的新TSX文件中有一个错误，我无法弄清楚。

我粘贴到树下组件的每个道具上都有30个奇怪的错误 - 这些错误都是：

Property＆＃39; nameOfProp＆＃39;类型＆＃39; IntrinsicAttributes＆amp; IntrinsicClassAttributes＆GT; ＆安培; {}＆amp; {孩子？：Reac ......＆＃39;。

以下是获取TypeScript翻转的示例代码。任何帮助将不胜感激，因为这是在生产中启动和运行React的最后一个障碍之一。注意：我没有包含有关App状态的信息以节省空间，但红线仅在子组件名称上（过滤器，名称，ID，计数）

＆＃13;

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>
  )
}
});

＆＃13;

<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>

＆＃13;

Answer 1

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() {
        ...
    }
}

使用Typescript（TSX文件）将道具传递给React中的子组件

1 个答案: