如何解读条件运算符中的IN关键字？React防御性代码解析

嘿，我来帮你把这行代码拆解得明明白白～

首先说你最关心的**in关键字**：
在JavaScript里，in操作符的作用是检查某个属性名是否存在于目标对象（或者它的原型链上）。举个例子，'text' in this.props这句话，就是在判断this.props这个React组件的props对象里，有没有text这个属性键——注意哦，不管text的值是undefined、null还是其他什么，只要这个键名存在，它就会返回true；只有当text完全没被传入props时，才会返回false。

接下来拆解整行防御性代码：

var text = 'text' in this.props ? this.props.text : '';

这是三元运算符的写法，翻译成普通的if-else逻辑就是：

var text;
if ('text' in this.props) {
  // 如果props里有text属性，就用它的值
  text = this.props.text;
} else {
  // 如果没有，就默认给空字符串
  text = '';
}

这么写的目的是避免直接访问this.props.text时，因为属性不存在可能引发的问题，属于典型的防御性编程思路。

然后说说你提到的React替代方案——getDefaultProps()：
在React类组件里，我们可以通过定义getDefaultProps()来统一设置props的默认值，这样就不用手动写三元判断了，代码会更干净。示例代码如下：

class YourComponent extends React.Component {
  static getDefaultProps() {
    return {
      text: ''
    };
  }

  render() {
    // 现在直接用this.props.text就行，没传的话自动用空字符串
    return <div>{this.props.text}</div>;
  }
}

如果是现在更常用的函数式组件，还可以直接在参数里设置默认值，写法更简洁：

function YourComponent({ text = '' }) {
  return <div>{text}</div>;
}

两种方式都能达到和原来防御性代码一样的效果，而且维护起来更方便～

内容的提问来源于stack exchange，提问作者monchisan