提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

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

组件基础React 创建 语法 复合
2023-09-27 14:26:17 时间 
<!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>

 

相关文章