javascript - ES6下，React组件如何嵌套？

问题描述

问 题

用ES6写react的时候，发现无法嵌套组件。

require('normalize.css/normalize.css');
require('styles/App.css');

import React from 'react';

class AppComponent extends React.Component {
  render() {
    return (
      <div>
        <div>我是父组件!</div>
        <sub />
      </div>
    );
  }
}
class sub extends React.Component {
  render() {
    return (
      <div>
        我是子组件
      </div>
    );
  }
}

export default AppComponent;

屏幕上只显示我是父组件。
控制台是这样的（也没有报错）：

React官方文档里也是这样嵌套的啊：

到底哪里出了问题呢？

解决方案

jsx会根据首字母大小写来区分是React组件还是Html标签，React组件首字母大写，Html标签小写

这篇关于javascript - ES6下，React组件如何嵌套？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！