react中的自定义组件

react中的自定义组件分两类

1.函数式组件

  <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //1.创建函数式组件 名字首字母大写
        function Demo(){
            return <h1>我是函数式定义的组件</h1>
        }

        //2.渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))

    </script>

1.1：
函数式组件就是创建一个函数，return组件内容
注：.创建函数式组件 名字首字母大写

2.类式组件

 <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //1.创建类式组件
        class MyComponent extends React.Component{
            render() {
                return <h1>我是类式定义的组件</h1>
            }
        }
        //2.渲染组件到页面 
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    </script>

2.1：
类式组件就是创建一个类，在render方法内return组件内容
注：.创建类式组件要继承React.Component
个人博客：余生的学习笔记