Question

鉴于以下组件，我收到有关缺少isUpdating道具的错误。我该如何解决这个问题？

错误：（87,27）TS2322：输入'{name：“Fred”; ''不能赋值给'IntrinsicAttributes＆amp; IntrinsicClassAttributes＆GT; ＆安培; Reado ......“。输入'{name：“Fred”; ''不能赋值为'Readonly'。类型'{name：“Fred”中缺少属性'isUpdating'; }”。

interface ContaineeProps {
  name: string;
  isUpdating: string;
}

const Containee = (props: ContaineeProps) => <span>{props.name}</span>;

interface MapStateToProps {
  isUpdating: boolean;
}
const mapStateToProps = state => ({ isUpdating: state.years.yearsUpdating });

const ConnectedContainee = connect<MapStateToProps, null, ContaineeProps>(mapStateToProps)(Containee);


interface Container {
  name: string;
}

class Container extends React.Component<Container, {}> {
  render() {
    return (
      <ConnectedContainee name="Fred" />
    )
  }
}

编辑：这个问题更多地是关于redux / react / typescript应用程序中的最佳实践，而不是关于此错误的原因。我是否总是必须在两个地方指定所需的道具类型信息（组件的props接口和mapStateToProps函数的接口）？

Answer 1

您收到的编译错误是正确的。鉴于您的ContaineeProps包含属性isUpdating，您的组件在使用时期望传递此属性。

e.g。 <ConnectedContainee name="Fred" isUpdating="testing" />

鉴于您的问题，我想知道isUpdating是否应该在ContaineeProps中？如果不是，那么只需删除它，编译错误就会消失。

如果它打算在那里，那么我建议给它一个不同的名称，因为你的isUpdating界面中已有MapStateToProps道具。

<强>更新

如果我正确理解了您的评论，您已将isUpdating道具添加到ContaineeProps，以便能够在您的组件中访问它。要做到这一点，你不需要将属性添加到两个支持界面，我实际上并不认为这样可行......

您需要做的是组合您的接口，以便您的组件可以访问包含从父组件传入的props和从redux映射的props的两个接口。

以下是一个例子：

interface AllProps extends MapStateToProps, ContaineeProps {}

const Containee = (props: AllProps) => <span>{props.name} {props.isUpdating}</span>;

或

const Containee = (props: ContaineeProps & MapStateToProps) => <span>{props.name} {props.isUpdating}</span>;

props.isUpdating现在指的是从redux商店映射的属性。如果您还希望在本地存储isUpdating值，则可以使用组件本地状态。

在React / Redux项目中，如何让Typescript知道redux的连接装饰器传递的属性？

1 个答案: