组件/组件属性/复合组件

Posted 2020-10-16 Da雪山

一. 创建
/* 创建一个组件类, 用于输出 hello react
*
* 1.React中创建的组将类,大写字母开头
* 2.使用React.createClass方法创建一个组件类
* 3.核心代码:每个组件类都必须实现自己的render方法, 输出定义好的组件模板,返回值:null,fasle,组件模板
* 4.注意:组件类只能包含一个顶层标签
*
* */

var HelloMessage = React.createClass({
   render: function () {
       //返回定义的组件模板
       return <h1>Hello React组件</h1>;
   }

});

//使用
ReactDOM.render(
        //在模板中插入<HelloMessage/>, 会自动生成一个实例
         <HelloMessage/>,
        document.getElementById("container")

);

二, 组件样式

/*
* 设置组件的样式,三种:
* 1.内联样式
* 2.对象样式
* 3.选择器样式
*
* 注意:
* 在React 和 html5中设置样式时,书写格式是有区别的
* 1.h5中以;结尾
*   React中以,结尾
* 2.h5中,key value都不加引号
*   React中属于js对象,key的名字不能出现"-",需要使用驼峰命名,如果value是字符串,需要加引号
* 3.h5中,value如果是数字,需要带单位
*   React中不需要带单位
*
*
* 需求:定义一个组件, 分为上下两行显示内容
* <div>内联样式, 设置背景颜色,边框大小,边框颜色
* <h1> 对象样式,背景颜色,字体颜色
* <p> 选择器样式, 设置字体大小(类名需要使用className,不能使用class)
*
* */

//创建设置h1样式的对象
var hStyle = {
    backgroundColor:"green",
    color:"red"
}

var ShowMessage = React.createClass({
    render: function () {
        return(
                //外层{}表示jsx语法,内层{}表示对象
                <div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black"}}>
                    <h1 style={hStyle}>{this.props.firstRow}</h1>
                    <p className="pStyle">{this.props.secondRow}</p>
                </div>
        )
    }

});
//使用
ReactDOM.render(
        <ShowMessage firstRow="你好"secondRow="计算机"/>,
        document.getElementById("container")
);


三, 复合组件

/* 复合组件
* 也成组合组件,创建多个组件合成一个组件
*
* 需求:定义一个组件WebShow,功能:输出网站的名字和网址,网址是一个可以点击的链接
*
* 分析:定义一个组件WebName负责输出网站名字,
*      定义一个组件WebLind显示网站的网址,并且可以点击
*
*
* */
//1.定义WebName组件
var WebName = React.createClass({
   render: function () {
       return <h1>大雪山</h1>
   }

});
//定义WebLink组件
var WebLink = React.createClass({
    render: function () {
        return <a href="https://www.baidu.com">https://www.baidu.com</a>
    }
})
//复合组件
var WebShow = React.createClass({
    render:function () {
        return(
                <div>
                    <WebName/>
                    <WebLink/>
                </div>
        )

    }
});

//使用
ReactDOM.render(
        <WebShow/>,
        document.getElementById("container")
);