propTypes isRequired 约束在react中误导行为

IT技术 javascript reactjs
2021-05-06 17:10:55

我对react(或说网络技术)很陌生。我开始构建一个使用不同组件的应用程序。当我浏览文档时,我认为放入isRequiredpropTypes,会约束用户isRequired在使用组件时提供所有属性。

但是,在这个例子中,即使我不传递isRequired属性,我也可以加载组件。

var PanelPreview = React.createClass({
    getInitialState: function(){
       return { captionIndex: 0 };
    },
    propTypes: {
       beforeSrc: React.PropTypes.string.isRequired,
       afterSrc: React.PropTypes.string.isRequired,
       captionTable: React.PropTypes.array
    },
});
module.exports = PanelPreview;

使用此组件的应用程序:

   React.render(
      < PanelPreview />,
      document.getElementById('main')
   );

我想限制组件的用户提供这两个值,否则会引发某种错误。

1个回答

props验证失败目前不被视为严重错误。但是,控制台中会记录一条警告:

Warning: Required prop `beforeSrc` was not specified in `PanelPreview`.

这仅发生在非生产构建的react中。在生产中没有记录任何内容。请参阅此小提琴示例http://jsfiddle.net/5mafp3eu/1/

已经讨论过让 React 快速失败以应对 prop 验证失败(请参阅下面的问题),看起来它最终会发生,但我认为它尚未出现在任何路线图上。