我应该用try {} catch（err）{}包装所有React渲染代码吗？

Question

运行render代码时，有时React会无声地失败。然后很难找到它破坏的地方。

我想知道，我是否应该将render函数的所有代码放在try {} catch(err) {alert(err)}中？

这是一个好习惯，还是应该以不同的方式捕获和调试错误？

其中一个显示没有错误的情况是当我向组件发送一些实际上未定义的道具变量并且它试图获取该未定义变量的属性时，如下所示：

<FormField form={this.props.form} />

然后，在FormField组件render函数内部有以下代码：

var value = this.props.form[this.props.id]

现在，如果未定义表单prop，FormField组件中的代码不会显示任何错误，但是当我使用try / catch时，它会显示：

可能我应该使用try / catch来调试错误，然后修复并添加检查，然后删除try / catch进行生产？

Answer 1

听起来你可以从prop validation中受益。然后你可以决定道具的类型。

React.createClass({
  propTypes: {
    form: React.PropTypes.object,
    id: React.PropTypes.string
  }
  // ...
})

然后，如果您没有提供正确类型的属性，它将记录错误。

或者，如果更合适，您可以为该属性提供default value。

React.createClass({
  getDefaultProps: function() {
    return {
      form: defaultFormProp
    };
  }
});

然后，如果在渲染组件时没有提供道具，则将使用默认值。