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

Posted 2023-02-21

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

【英文标题】：Pass props to child component in React, with Typescript (TSX file)

【发布时间】：2017-01-31 11:39:37

【问题描述】：

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

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

类型“IntrinsicAttributes & IntrinsicClassAttributes> & & children?: Reac...”上不存在属性“nameOfProp”。

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

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>

【参考方案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() 
        ...
    

【讨论】：

非常感谢！我曾尝试过界面，但不正确。这现在有效。所以没有办法保持 prop 定义松散？即使我很高兴拥有非类型安全的 TSX 文件，我也必须始终进行接口声明？

您始终可以将any, any 用于T, S，但是您将失去类型安全性。在这种情况下，编译器无法推断出正确的类型。在我看来，使用类更容易、更具可读性并且更有意义，然后添加泛型也不觉得多余。