React + TypeScript 默认 Props 的处理- 学习笔记- 青岛软件培训-选择一家好的青岛软件培训学校，就要看教学质量和口碑

字数：893，预计阅读时间：4min

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() {