react基础语法（三）组件的创建和复合组件

最新推荐文章于 2024-11-13 01:18:00 发布

weixin_30707875

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量68

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lhl66/p/9929011.html

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="app">

        </div>
        <script type="text/babel">
            /*注意，原生 HTML元素名以小写字母开头，而自定义的 React类名以大写字母开头，
            比如 HelloMessage不能写成 helloMessage;
            除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错*/
            //函数封装组件
            function NewComponent(props) {
                return <h1>函数封装的组件!</h1>;
            }
            //ES6创建组件
            class Comfill extends React.Component {
              render() {
                return <h1>es6创建的组件!</h1>;
              }
            }
            //向组件传递参数
            function HelloMessage(props) {
                return <h1>你好! {props.name}!</h1>;
            }
            //复合组件
            function App() {
                return (
                    <div>
                        <NewComponent/>
                        <Comfill/>
                        <HelloMessage name="react"/>
                    </div>
                );
            }
            //const element3 = <HelloMessage name="react"/>; /*用户自定义的组件*/
            ReactDOM.render(
                <App />,
                document.getElementById('app')
            );
        </script>
    </body>

</html>