React + TypeScript 默认 Props 的处理

React 中的默认 Props

通过组件的 defaultProps 属性可为其 Props 指定默认值。

以下示例来自 React 官方文档 - Default Prop Values：

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

如果编译过程使用了 Babel 的 transform-class-properties 插件，还可以这么写：

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

加入 TypeScript

加入 TypeScript 后

interface Props {
  name?: string;
}

class Greeting extends React.Component<Props, {}> {
  static defaultProps = {
    name: "stranger",
  };

  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

此时不支持直接通过类访问 defaultProps 来赋值以设置默认属性，因为 React.Component 类型上并没有该属性。

//