React 认知三组件Component

最新推荐文章于 2022-09-20 21:55:14 发布

Carlos.Guo

最新推荐文章于 2022-09-20 21:55:14 发布

阅读量739

点赞数 1

分类专栏： React 文章标签： react-component

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

React 对于组件化开发来说非常方便。下面看看组件开发的原理。

组件开发的注意事项和规则。

<!DOCTYPE　html>
<html>
<head>
    <meta CHARSET="UTF-8">
    <title></title>

    <!--react.js 是react的核心库-->
    <script src="./build/react.js"></script>
    <!--react-dom.js 提供与dom相关的功能-->
    <script src="./build/react-dom.js"></script>
    <!--browser.main.js 将jsx转化为js语法-->
    <script src="./build/browser.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>-->

    <style>
        .pStyle {
            font-size: 20px;
        }
    </style>
</head>
<body>
<!--React 渲染的模板内容 会插入到这个dom节点中，作为一个容器-->
<div id="container">

</div>

</body>
<!--在react的开发中 使用jsx 跟js不兼容 在使用是 使用babel-->
<!--babel是一个转换编译器，es6转换成浏览器运行的代码-->
<script type="text/babel">
    //此处 编写react
    /*
     创建一个组件类，用于输出hello react
     1、react 中创建组件的类一大写字母开头，驼峰命名方法
     2、在react中React.createClass()方法创建一个组件类
     3、核心代码：每个组件类都必须实现自己的render方法，输出定义
     好的组件模板，返回值：null false 组件模板那
     4、注意：组件类只能包含一个顶层标签
     */
    //组件 组件属性
    //    let HelloMessage = React.createClass({
    //        render: function () {
    //            return <h1>{this.props.helloText}</h1>
    //        }
    //    });
    //    ReactDOM.render(
    //        //在模板中插入<HelloMessage> 自动生成一个实例
    //            <HelloMessage helloText="你好"/>,
    //        document.getElementById("container")
    //    )
    ;
    /*
     设置组件的样式
     1、内联样式
     2、对象样式
     3、选择器样式
     注意：在react和h5中 设置样式时 书写格式 是有区别的
     1、h5 以；结尾
     react以，结尾
     2、h5中key、value都不加引号
     react中数以js对象，key的名字不能出现“-”，需要使用驼峰命名方法
     如果value为字符串，需要带单位
     3、h5中，value如果是数字，需要单位
     react中不需要单位
     我们定义一个组件，同时使用三种设置组件的样式的方法
     需求：定义一个组件，分为上下两行显示内容
     <div> 内敛样式：设置背景颜色、边框大小，边框颜色
     <h1>  对象样式：设置背景颜色 字体颜色
     <p>   选择器样式：设置字体大小
     注意：在react中使用选择器设置组件样式的时候胡，属性名不能使用class 需使用className
     医用htmlFor 替换for
     */
    //创建设置h1样式的对象
    /*  let hStyle = {
     backgroundColor: "green",
     color: "red"
     };
     let ShowMessage = React.createClass({
     render: function () {
     return (
     <div style={{backgroundColor: "yellow", borderWidth: 5, borderColor: "black", borderStyle: "so"}}>
     <h1 style={hStyle}>{this.props.firstRow}</h1>
     <p className="pStyle">{this.props.secondRow}</p>
     </div>
     )
     }
     }
     );
     ReactDOM.render(
     <ShowMessage firstRow="hello" secondRow="World"/>,
     document.getElementById("container")
     )*/

    /*
     复合组件

     也被成为组合组件，创建多个组件合成一个组件
     需求：定义一个组件 webShow
     功能：输出网站的名字和网址，网址是一个可点击的连接
     分析：定义一个WebName负责输出网站名字
     定义组件WebLink显示网站的网址，并且可点击
     */
    let WebName = React.createClass({
        render: function () {
            return <h1>{this.props.name}</h1>;
        }
    });
    let WebLink = React.createClass({
        render: function () {
            return <a href={this.props.linkName}>{this.props.linkName}</a>
        }
    });

    let WebShow = React.createClass({
        render: function () {
            return (
                    <div>
                        <WebName name={this.props.name}/>
                        <WebLink linkName={this.props.linkName}/>
                    </div>
            );
        }
    });

    ReactDOM.render(
            <WebShow name="Hello World" linkName="http://www.baidu.com"/>,
        document.getElementById("container")
    )

</script>
</html>