React 认知三组件Component

来源：互联网发布：比较好的淘宝客采集群编辑：程序博客网时间：2024/06/05 12:31
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>
阅读全文
1 0
React 认知 三 组件Component

React 认知三组件Component
