小编Fel*_*tos的帖子

我开始使用 React 和 Typescript 开发一个应用程序。顺便说一句，我是这两件事的新手。

我有一个反应组件和一些接口，我希望该接口中的每个字段都是必需的，但如果实现了一个特定字段，则不再需要其他字段。

在这种情况下，如果我设置“对象”，我希望不需要实现其他 2 个字段。

interface ITextFieldProps {
    label: string,
    required: boolean,
    object?: any
}

export default class TextField extends React.Component<ITextFieldProps, any> {
    ...
}

希望有人帮忙，加油！

编辑

首先我要感谢所有的答案，我真的从他们每个人身上学到了很多东西。他们帮助我了解我的问题并找到最佳解决方案。

我将传递的对象是元数据，因此它仅在 http 调用后在运行时可用。话虽这么说，无论如何我都无法在开发时检查并输入它。

所以我使用反应道具传播解决了我的问题。

（今天打字稿还不支持，但总有一天会的嘿嘿https://github.com/Microsoft/TypeScript/issues/2103）：

export interface IMetadata {
    label: string,
    required: boolean
}

interface TextFieldProps extends IMetadata {
    ...
}

这样我就可以传递一个带有 props spread 的对象，然后当我调用 label="" 时，它会自动覆盖 {...this.metadata.nome} 中的标签：

<TextField {...this.metadata.nome} label="OverwriteLabel" />

编辑2

正如 Daniel 所说：不幸的是，JSX 中的类型检查有一个错误，请参阅：

https://github.com/Microsoft/TypeScript/issues/10171

他们计划在 2.1 版本中修复它。在此之前，该技术将不适用于 TSX。（修复后，我会回来更新这个答案。）

我在使用React propTyoes时遇到问题。正如您在下面的代码中看到的那样，我创建了一个需要2个道具才能工作的组件。

当我在App文件中使用该组件时，仅传递了1个属性，而没有“ stateSidebarVisible”，它不会抛出任何错误/警告反应...（我阅读了很多有关NODE_ENV生产/开发的信息，在我的节点中搜索process.env，但没有找到NODE_ENV变量）。有什么线索吗？

FFMainHeader

export default class FFMainHeader extends React.Component {
  render() {...}
}

FFMainHeader.propTypes = {
  stateSidebarVisible: React.PropTypes.bool.isRequired,
  handleSidebarChange: React.PropTypes.func.isRequired
};

应用程式

这是我所谓的FFMainHeader组件。

export default class FFMainApp extends React.Component {
    .......
    render() {
        return (
            <div id="FFMainApp">
                <FFMainHeader
                    handleSidebarChange={this.onSidebarChange} />
                <FFMainSidebar />
            </div>
        );
    }
}

编辑

export default class FFMainHeader extends React.Component {

  constructor(props) {
    super(props);
    this.clickSidebarChange = this.clickSidebarChange.bind(this);
  }

  clickSidebarChange(e) {
    e.preventDefault();
    (this.props.stateSidebarVisible) ?
      this.props.stateSidebarVisible = false :
      this.props.stateSidebarVisible = true;
    this.props.handleSidebarChange(this.props.stateSidebarVisible);
  }

  render() …