React学习——Day5

最新推荐文章于 2024-01-31 17:38:04 发布

whuhewei

最新推荐文章于 2024-01-31 17:38:04 发布

阅读量152

点赞数 2

分类专栏： React&webpack 文章标签： react

本文链接：https://blog.csdn.net/whuhewei/article/details/105322321

版权

React&webpack 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

创建组件的第一种方式：使用构造函数

使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收；必须要向外return一个合法的JSX创建的虚拟DOM。
以下代码除了使用构造函数来创建组件之外还用到了ES6中的展开运算符，并且把组件抽离为了一个单独的jsx文件：
Hello.jsx代码：

function Hello(props){
    return <h1>Hello，{props.name}！</h1>;
}

React05.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React05</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel" src="components/Hello.jsx"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        const dog = {
            name: '哈士奇',
            age: 3,
            gender: '雄'
        };
        ReactDOM.render(
            <Hello {...dog}/>,
            document.getElementById('app')
        );
    </script>
</body>
</html>