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 类型上并没有该属性。

//