第一个react
Posted huihuihero
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一个react相关的知识，希望对你有一定的参考价值。
baidu.js
import React,{Component} from 'react';
import './baidu.less';
import {Layout,Input,Icon,Menu,Dropdown} from 'antd';
const {
Header,Content,Footer
} = Layout;
const Search=Input.Search;
const menu=(
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href=" " className="fs-12">搜索设置</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href=" " className="fs-12">高级搜索</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href=" " className="fs-12">关闭预测</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href=" " className="fs-12">隐私设置</a>
</Menu.Item>
</Menu>
)
export default class BaiDu extends Component{
state={
zlist:false
}
hd1=()=>{
this.setState({zlist:true})
}
hd2=()=>{
this.setState({zlist:false})
}
render(){
return (
<div>
<Layout>
<Header style={{backgroundColor: "white",paddingRight: 12}}>
<ul >
<li><a href="http://news.baidu.com" className="linkblue">新闻</a></li>
<li><a href="http://www.hao123.com" className="linkblue">hao123</a></li>
<li><a href="http://map.baidu.com" className="linkblue">地图</a></li>
<li><a href="http://v.baidu.com" className="linkblue">视频</a></li>
<li><a href="http://tieba.baidu.com" className="linkblue">贴吧</a></li>
<li><a href="http://xueshu.baidu.com" className="linkblue">学术</a></li>
<li><a href=" " className="linkblue font-weight-normal">登录</a></li>
<li>
<Dropdown overlay={menu} placement="bottomCenter">
<a href=" " className="linkblue font-weight-normal">设置 </a>
</Dropdown>
</li>
<span className="moreproduct" onMouseEnter={this.hd1}>更多产品</span>
</ul>
{this.state.zlist?[<div style={{position:"fixed",height: 935,right:0,top:0}} id="productlist">
<div className="text-center morelist2" onMouseLeave={this.hd2}>
<div className="moreproduct2">
<div>更多产品</div>
</div>
<div>
<div className="fs-12 morelist">
<a href=" " className="d-block color666">
<img src={require("../imgs/nuomi.png")} alt="" className="listimg" />
<div>糯米</div>
</a>
<a href=" " className="d-block color666">
<img src={require("../imgs/yinyue.png")} alt="" className="listimg" />
<div>音乐</div>
</a>
<a href=" " className="d-block color666">
<img src={require("../imgs/tu.png")} alt="" className="listimg" />
<div>图片</div>
</a>
<a href=" " className="d-block color666">
<img src={require("../imgs/zhidao.png")} alt="" className="listimg" />
<div>知道</div>
</a>
<a href=" " className="d-block color666">
<img src={require("../imgs/wenku.png")} alt="" className="listimg" />
<div>文库</div>
</a>
<a href=" " className="d-block color666">
<img src={require("../imgs/tongji.png")} alt="" className="listimg" />
<div>风云榜</div>
</a>
<a href=" " className="d-block color666">全部产品>></a>
</div>
</div>
</div>
</div>]:null}
</Header>
<Content style={{backgroundColor: "white",paddingTop:105}}>
<div className="logodiv">
<img src={require("../imgs/logo.png")} alt="" className="logo"/>
</div>
<div className="inputdiv">
<Search
enterButton="百度一下"
size="large"
onSearch={value=>console.log(value)}
suffix = {
<Icon type="camera" className="iconcamera"/>
}
style={{height: 30}}
/>
</div>
</Content>
<Footer style={{backgroundColor: "white"}}>
<div className="erweimadiv">
<img src={require("../imgs/logo1.png")} alt="" /><br/>
<span className="font-weight-bold fs-12" style={{marginLeft:18}}>百度</span>
</div>
<div className="fs-12 footdiv" id="foot">
<a href=" " style={{marginRight: 25}}>把百度设为主页</a>
<a href=" " style={{marginRight: 25}}>关于百度</a>
<a href=" " style={{marginRight: 25,fontWeight:500}}>About Baidu</a>
<a href=" ">百度推广</a><br/>
<div style={{marginTop:6}}>
<span style={{marginRight:25}}><span className="font-weight-500">?2019 Baidu </span><a href=" ">使用百度前必读 </a><a href=" ">意见反馈 </a>京ICP证030173号 <Icon type="safety-certificate" /></span>
<a href=" ">京公网安备1100000200001</a> <Icon type="safety-certificate" />
</div>
</div>
</Footer>
</Layout>
</div>
);
}
} baidu.less
@import '~antd/dist/antd.css';
li{
float: left;
list-style: none;
margin-right: 18px;
}
ul{
float:right;
}
.linkblue{
color: #333;
font-weight: 600;
text-decoration: underline;
&:hover{
color: #1890ff;
text-decoration: underline;
}
}
.font-weight-normal{
font-weight: 400;
}
.font-weight-bold{
font-weight: 700;
}
.font-weight-500{
font-weight: 500;
}
.fs-12{
font-size: 12px!important;
}
.logo{
width: 270px;
height:129px;
}
.logodiv{
width: 270px;
margin: 0 auto;
padding-bottom: 25px;
}
.inputdiv{
width: 640px;
margin: 0 auto;
}
.erweimadiv{
width: 60px;
margin: 0 auto;
padding-top: 360px;
}
.footdiv{
width: 600px;
margin: 0 auto;
padding-top: 20px;
text-align: center;
}
.text-center{
text-align: center;
}
#foot{
color: #999;
a{
color:#999;
text-decoration: underline;
}
}
.moreproduct{
padding: 3px;
background-color: #3388ff;
color: white;
cursor: pointer;
}
.d-none{
display: none;
}
.d-block{
display: block;
}
.color666{
color: #666;
}
.morelist{
padding: 0 8px;
a{
line-height: 4;
border-bottom: 1px solid #f0f0f0;
&:hover{
text-decoration: underline;
color: #666;
}
div{
line-height: 2
}
}
}
.morelist2{
position: absolute;
height: 935px;
width: 85px;
background-color: #f9f9f9;
right: 0;
}
.moreproduct2{
padding: 0 8px;
cursor: pointer;
div{
border-bottom: 1px solid #f0f0f0;
}
}
.listimg{
width: 35px;
height: 35px;
}
.iconcamera{
color: #999;
font-size: 22px;
font-weight: 200;
cursor: pointer;
&:hover{
color: #1890ff;
}
}以上是关于第一个react的主要内容，如果未能解决你的问题，请参考以下文章