web-dev-qa-db-fra.com

Comment déclarer defaultProps sur une classe de composant React à l'aide de TypeScript?

Quelqu'un pourrait-il montrer un exemple de définition de defaultProps sur une classe de composant React dans TypeScript?

interface IProps {}
interface IState {}

class SomeComponent extends Component<IProps, IState> {
    // ... defaultProps ?
    // public defaultProps: IProps = {}; // This statement produces an error

    constructor(props: IProps) {
        super(props);
    }

    // ...
}
reactjstypescript
22
oei

Vous pouvez définir les accessoires par défaut de cette façon:

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.tick = this.tick.bind(this);
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

Cela équivaut dans TypeScript à définir defaultProps en tant que champ statique dans le corps de la classe:

class SomeComponent extends Component<IProps, IStates> {
    public static defaultProps: IProps = { /* ... */ }; 
    // ...
}
50
shadeglare

Disons que si vous avez un composant Movie sans état, vous pouvez définir le type de propriété comme suit:

const Movie = props => {
    return (
       <div>
         <h3>{props.movie.title}</h3>
       </div>
    );
 };

Movie.propTypes = {
  movie: PropTypes.shape({
     title: PropTypes.string.isRequired
  })
};

Movie.defaultProp = {
  movie: PropTypes.shape({})
};

Et pour le composant de classe, vous pouvez faire quelque chose comme ceci ou vous pouvez utiliser le même motif que ci-dessus:

export default class Movie extends React.Component {
  static propTypes = {
  movie: PropTypes.shape({
  title: PropTypes.string.isRequired
  }),
  desc: PropTypes.string
};

 static defaultProps = {
  desc: 'No movie is available'
 };

render() {
  return (
     <div>
        <h3>{this.props.movie.title}</h3>
        <h3>{this.props.movie.desc}</h3>
     </div>
    );
 }
}
0
ASHISH RANJAN