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

zl程序教程

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

当前栏目

react 基础之组件篇二——Style in React

组件基础React in Style
2023-06-13 09:17:27 时间

样式在react中的应用

样式在react中的应用

前言

你问我为什么写博客? 因为阿拉斯加爱写bugger！！！

微信公众号：爱写bugger的阿拉斯加 如有问题或建议，请往公众号，我们一起交流如何写bugger !

书接上文——react 基础之组件篇一 本节精彩继续，阿拉斯加继续装逼如何优雅的写bugger！！！

1. React组件的样式要怎么写？

1.className

  1. 直接在 style 里面先定义好类名与样式，组件上写好对应的样式名className 即可。

样式如下：

<style type="text/css">
            #container {
                padding: 50px;
                background-color: #FFF;
            }

            .letter {
                padding: 50px;
                color: red;
                font-size: 30px;
                border: 1px solid red;
            }

        </style>

组件上这样写：

<body>
        <div id="container"></div>
        <script type="text/babel">

            var Letter = React.createClass({
                render: function(){
                    return (
                        <div className='letter'>
                            {this.props.children}
                        </div>
                    );
                }
            })
            var destination = document.querySelector("#container");
            ReactDOM.render(
                <div>
                    <Letter bgcolor="#58B3FF">Letter</Letter>
                </div>,
                destination
            )
        </script>
    </body>

注意：组件上的类名属性 className 要驼峰命名法，因为要按照javascript的语法。

效果如下：

className

2. style

通过直接定义 style 来定制化样式 怎样定制，如下：

<body>
        <div id="container"></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>
                    );
                }
            })
            var destination = document.querySelector("#container");
            ReactDOM.render(
                <div>
                    <Letter bgcolor="#58B3FF">Letter1</Letter>
                    <Letter bgcolor="red">Letter2</Letter>
                    <Letter bgcolor="pink">Letter3</Letter>
                    <Letter bgcolor="yellow">Letter4</Letter>
                </div>,
                destination
            )
        </script>
    </body>

注意：css属性也要驼峰命名法，因为要按照javascript的语法。 如：css上的 background-color -> backgroundColor

效果如图:

image.png

4. 后语

虽然看上去很简单，但是建议初学者自己敲一遍，可能会出现各种各样的问题。学习，千万不能有所见即所得的想法，实践才是检验真理的唯一标准。

本节内容完毕！下节内容：「react 基础之组件篇三」 将讲解 设计复合组件。

原代码我都已经上传到 github了，有兴趣的可以去了解一下。

传送门 ：https://github.com/biaochenxuying/react-learning

相关文章