2

考虑以下组件：

interface OProps {
  // property here should be sent by parent
  id: string;
}

interface IProps {
  // property here just use internal for intellisense
  notNeed: number;
}

export class Foo extends React.Component<OProps & IProps, void> {}

export class Bar extends React.Component<OProps & InejctedIntlProps, void> {}

当我使用Foo组件时，它应该同时发送 OProps 和 IProps ......

// error: 'notNeed' is missing
const f = <Foo id="test" />;

// error: 'intl' is missing
const b = <Bar id="test" />;

IProps 可能在injectedIntlProps、hoc 注入的 props、mobx 存储的 props 或任何不需要父级注入的 props 中。

我知道有一些方法可以解决它，例如：

export default injectedIntlProps<OProps>（我不喜欢 export default...）或将 props 声明为 partial notNeed?: number，但仍然想知道是否有更好的解决方案？只导出需要的道具...

4

1 回答 1

1

如果我理解正确，您在某个父组件中使用连接/容器组件，并且您希望区分映射的道具（来自 redux 存储的道具）和自己的道具（从父组件传入的道具）。

通过将属性拆分为单独的接口，您走在正确的轨道上，您只需要指定哪些道具被映射，哪些道具是连接函数中的自己的道具。

这是一个如何为您的 foo 组件执行此操作的示例。请注意，您已经省略了组件的很多关键部分，因此我不得不做出一些假设。

import * as React from 'react';
import { connect } from 'react-redux';
// import {IAppState} from '../AppState';

interface IOwnProps {
  id: string;
}

interface IMappedProps {
  notNeed: number;
}

export interface IFooProps extends IMappedProps, IOwnProps { }

export class Foo extends React.Component<IFooProps, void> {}

// This function is just an example, yours may look different.
function mapStateToProps(state: IAppState): IMappedProps {
    return {
        notNeed: state.notNeed,
    };
}

export default connect<IMappedProps, null, IOwnProps>(mapStateToProps, null,
)(Foo);

如果我错过了标记并且您没有使用连接组件，那么您只需要使用组件的内部状态。

例如

import * as React from 'react';

interface IProps {
  id: string;
}

interface IState {
  notNeed: number;
}

export class Foo extends React.Component<IProps, IState> {}
于 2017-05-21T22:45:15.153 回答