React自定义Headers组件用法及onTabChosen属性调用报错问题咨询

1 关于标签的性质 #

你说的没错，<Headers>就是你自行定义的React自定义组件标签。React的JSX语法规则里，所有首字母大写的标签都会被识别为用户自定义的React组件，运行时会直接匹配你代码开头定义的Headers类，渲染时执行该类的render方法产出对应的DOM结构。

2 关于onTabChosen的运行逻辑 #

你的理解是对的，onTabChosen本身没有在Headers组件内部声明，它是父组件向子组件传递的方法属性，核心逻辑如下：

• React组件的props是父组件和子组件通信的载体，不仅可以传字符串、数字这类普通数据，也可以传函数类型的值。
• 你原来的代码里父组件Tabs通过onTabChosen={this.selectTab}的写法，把自身定义的selectTab方法传给了子组件Headers，子组件内部就可以通过this.props.onTabChosen拿到这个方法。
• 你给li绑定点击事件时写的() => this.props.onTabChosen(index)，就是点击标签时，调用父组件传过来的selectTab方法，把当前点击的标签下标作为参数回传给父组件。
• 你注释掉onTabChosen的传值之后，父组件没有给子组件传递这个属性，this.props.onTabChosen的值就是undefined，调用undefined当然就会抛出_this.props.onTabChosen is not a function的错误。

这个是React里非常通用的子组件触发父组件状态更新的模式：父组件把修改状态的方法通过props传给子组件，子组件触发交互时调用该方法回传参数，父组件执行方法修改自身state，再把更新后的state通过props传给子组件，完成视图的重新渲染。

补充优化方案 #

如果想要避免漏传onTabChosen时抛出异常，可以给Headers组件设置默认属性：

class Headers extends React.Component {
  // 原有代码不变
}
Headers.defaultProps = {
  onTabChosen: () => {}
}

这样就算父组件没有传递该属性，子组件调用时也只会执行空函数，不会报错。

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