React组件中如何处理props无指定属性的条件判断问题？

嘿，刚入门React碰到这种问题太正常啦，我来给你把问题说清楚，再给你几个实用的解决方案～

首先咱们先搞明白为啥原来的代码会出问题：当父组件没传task这个props时，this.props.task的值是undefined。虽然你把它赋值给hasTask本身没问题，但在JSX里{hasTask && <div>...</div>}这个表达式，当hasTask是undefined时，整个表达式的结果就是undefined——而React是不允许把undefined作为子元素渲染的，这就导致了页面无法正常渲染。

下面是几种处理这种情况的最佳方式，按推荐程度排序：

1. 给组件设置props默认值（最推荐） #

对于类组件来说，你可以用defaultProps给task设置一个默认值，这样就算父组件没传这个props，this.props.task也会有一个合法的值，不会是undefined：

class YourComponent extends React.Component {
  // 给task设置默认值，这里用null，你也可以根据业务场景用空对象/空数组
  static defaultProps = {
    task: null
  };

  render() { 
    let hasTask = this.props.task;
    return <div> {hasTask && <div> I have a task </div>} </div>;
  }
}

这种方式让组件的props有明确的预期值，代码也更健壮，是React组件设计的最佳实践之一。

2. 解构props时设置默认值 #

你也可以在解构props的时候直接给task加默认值，写法更简洁：

render() { 
  // 解构时给task设置默认值为null
  const { task = null } = this.props;
  return <div> {task && <div> I have a task </div>} </div>;
}

3. 直接在判断中排除undefined和null #

如果不想设置默认值，也可以直接在判断条件里明确排除undefined和null的情况，比如用!= null（这个表达式会同时判断null和undefined）：

render() { 
  return <div> {this.props.task != null && <div> I have a task </div>} </div>;
}

或者用Boolean()把值强制转成布尔值，确保不会出现undefined的情况：

render() { 
  return <div> {Boolean(this.props.task) && <div> I have a task </div>} </div>;
}

总结一下，最推荐的还是给props设置默认值，这样组件的行为更可预测，也能避免很多类似的边界问题。

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