React组件应用

最新推荐文章于 2024-08-07 10:27:29 发布

黄宝康

最新推荐文章于 2024-08-07 10:27:29 发布

阅读量448

点赞数

分类专栏： React 文章标签： React组件应用Demo

本文链接：https://blog.csdn.net/huangbaokang/article/details/79660765

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本节使用React组件做个小案例，进一步掌握React组件的强大应用之处。

首先我们构建一个Letter组件，然后渲染到example元素上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var Letter = React.createClass({
            render : function(){
                return (<div>{this.props.children}</div>);
            }
        });

        ReactDOM.render(
            <div>
                <Letter >H</Letter>
                <Letter >U</Letter>
                <Letter >A</Letter>
                <Letter >N</Letter>
                <Letter >G</Letter>
            </div>,
            document.getElementById('example')
        );
    </script>
</body>
</html>

这里写图片描述

所展示的页面太丑了，我们想加点样式。
通过分析页面结构，我们知道字母被包在三层div中。
加上样式后：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    <style type="text/css">
        div div div {
            padding:10px;
            margin:10px;
            background-color:#EB34FF;
            color:#333;
            display:inline-block;
            font-family:monospace;
            font-size:32px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var Letter = React.createClass({
            render : function(){
                return (<div>{this.props.children}</div>);
            }
        });

        ReactDOM.render(
            <div>
                <Letter >H</Letter>
                <Letter >U</Letter>
                <Letter >A</Letter>
                <Letter >N</Letter>
                <Letter >G</Letter>
            </div>,
            document.getElementById('example')
        );
    </script>
</body>
</html>

这里写图片描述

我们可以在创建组件的时候加上类名，由于class在React里是关键字，所以用的是className,改成如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    <style type="text/css">
        .letter {
            padding:10px;
            margin:10px;
            background-color:#EB34FF;
            color:#333;
            display:inline-block;
            font-family:monospace;
            font-size:32px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var Letter = React.createClass({
            render : function(){
                return (<div className="letter">{this.props.children}</div>);
            }
        });

        ReactDOM.render(
            <div>
                <Letter >H</Letter>
                <Letter >U</Letter>
                <Letter >A</Letter>
                <Letter >N</Letter>
                <Letter >G</Letter>
            </div>,
            document.getElementById('example')
        );
    </script>
</body>
</html>

但是React不推荐我们这样，而是推荐把样式封装成js对象。去掉style样式，封装成js对象，并使用style属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var Letter = React.createClass({
            render : function(){
                var letterStyle = {
                    padding:10,
                    margin:10,
                    backgroundColor:"#BF34CB",
                    color:"#333",
                    display:"inline-block",
                    fontFamily:"monospace",
                    fontSize:32,
                    textAlign:"center"
                };
                return (<div style={letterStyle}>{this.props.children}</div>);
            }
        });

        ReactDOM.render(
            <div>
                <Letter >H</Letter>
                <Letter >U</Letter>
                <Letter >A</Letter>
                <Letter >N</Letter>
                <Letter >G</Letter>
            </div>,
            document.getElementById('example')
        );
    </script>
</body>
</html>

解析的时候碰到padding,margin,fontSize等React会自动加上px,对象的键值采用驼峰命名。

稍微再改进一点点，我们想让每个字母的背景色自定义，相信各位小伙伴都应该想到了this.props

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var Letter = React.createClass({
            render : function(){
                var letterStyle = {
                    padding:10,
                    margin:10,
                    backgroundColor:this.props.bgcolor,
                    color:"#333",
                    display:"inline-block",
                    fontFamily:"monospace",
                    fontSize:32,
                    textAlign:"center"
                };
                return (<div style={letterStyle}>{this.props.children}</div>);
            }
        });

        ReactDOM.render(
            <div>
                <Letter bgcolor="#58B3FF">H</Letter>
                <Letter bgcolor="#FF4EBF">U</Letter>
                <Letter bgcolor="#49DD9E">A</Letter>
                <Letter bgcolor="#88CE1D">N</Letter>
                <Letter bgcolor="#AE99FF">G</Letter>
            </div>,
            document.getElementById('example')
        );
    </script>
</body>
</html>