React报错：未终止的JSX内容，组件拆分求助

兄弟，看你这报错信息，问题很明确——JSX结构写崩了！咱一步步捋清楚：

首先看App.js里的报错行：

63 | {person} >

这行多了个莫名其妙的>符号，直接把它删掉就好，改成{person}就行，这是导致“未终止的JSX内容”报错的直接原因。

另外再瞅一眼上一行的组件写法：

62 | Toggler = {this.togglerPersonHandler} />

这明显不符合React的props传递规范！传递props得是属性名={值}的格式，比如你要是给Toggler组件传一个叫toggler的方法，得写成<Toggler toggler={this.togglerPersonHandler} />，不然React根本识别不了这个props。

还有个小细节提醒：你贴的cockpit.js里，组件名字是Ccockpit，按照React的规则，组件名必须大写开头，最好改成Cockpit，不然React会把它当成普通HTML标签处理，后续说不定又出奇怪的问题。

最后再检查一遍整个App.js的JSX结构，确保所有标签都正确闭合了，比如<div>对应</div>，没有遗漏的闭合标签或者多余的符号，这样应该就能解决这个语法错误啦！

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