[JavaScript知识库]React 怎么默认Props的处理？ React + TypeScript 默认 Props 的处理

React + TypeScript 默认 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')
);

如果是用react框架搭建的项目会有proposal-class-properties：这个包，就可以这样写

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

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

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