react学习前一部分
引入
"braft-editor": "^2.3.9",
headmenu.js
import './headmenu.css' import React, { useState } from 'react'; import {HashRouter, Redirect ,Route, Switch,Link} from 'react-router-dom'; import { withRouter } from 'react-router-dom'; import BottomMenu from './bottommenu' import AList from './alist' import Add from '../views/add' import Article from '../views/article' const items = ["first","second","third"]; function Home() { return ( <div> <a>去detail</a> </div> ); } function Detail(){ return ( <div> <a>回到home</a> </div> ); } let gActives = [] let gSetActives = [] function setIndexActive(index){ //if() for(let i=0;i<gSetActives.length;i++){ if(index == i){ gSetActives[i](1) }else{ gSetActives[i](0) } } } let MenuItem = (props) => { const [active, setActive] = useState(0); gSetActives[props.index] = setActive; gActives[props.index] = active; let myIndex = props.index; return( <li className={active ==1?'liActive':'' } onClick={()=>{ setIndexActive(props.index) }} > <a href={props.href}>{props.name}</a> </li> ) }; function Mainpage(){ return( <div> <div className="headmenu"> <ul > <MenuItem href="#/bottom/home/list" name="home" index="0" /> <MenuItem href="#/bottom/home/list" name="list" index="1" /> <MenuItem href="#/bottom/home/third" name="third" index="2" /> </ul> </div> <Route exact path="/bottom/home/list" component={AList}/> <Route exact path="/bottom/home/third" component={Detail}/> </div> ) } function BottomPage(){ return( <div> <Route path="/bottom/home" component={Mainpage}/> <Route exact path="/bottom/my" component={Add}/> <BottomMenu /> </div> ) } const BasicRoute = (props) => ( <HashRouter> <Switch> <Route path="/bottom/" component={BottomPage}/> <Route exact path="/article" component={Article} /> </Switch> </HashRouter> ); // export default BasicRoute;
headmenu.less
.headmenu{
ul{
margin-top: 0;
display: flex;
//width: 200px;
padding-left: 20px;
border-bottom: 1px solid #00965e;
}
li{
flex: 0 0 70px;
text-align: center;
line-height: 50px;
list-style: none;
font-weight: 700!important;
font-size: 1rem;
justify-content:flex-start;
}
.liActive a {
color: #00965e;
}
a:link, .navbar a:active, .navbar a:visited {
color: #666;
text-decoration: none;
}
}
bottommenu.js
import './bottommenu.css' import React, { useState } from 'react'; let gActives = [] let gSetActives = [] function setIndexActive(index){ //if() for(let i=0;i<gSetActives.length;i++){ if(index == i){ gSetActives[i](1) }else{ gSetActives[i](0) } } } let MenuItem = (props) => { const [active, setActive] = useState(0); gSetActives[props.index] = setActive; gActives[props.index] = active; let myIndex = props.index; return( <li className={active ==1?'liActive':'' } onClick={()=>{ setIndexActive(props.index) }} > <a href={props.href}>{props.name}</a> </li> ) }; function BottomMenu (props) { return( <div className="bottommenu"> <ul> <MenuItem href="#/bottom/home/list" name="主页" index="0" /> <MenuItem href="#/bottom/my" name="我的" index="0" /> </ul> </div> ) } export default BottomMenu;
bottommenu.less
ul {
display: block;
list-style-type: disc;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
.bottommenu{
ul{
margin-top: 0;
margin-bottom: 0;
display: flex;
justify-content:space-between;
//width: 200px;
border-top: 1px solid #00965e;
position:absolute;bottom:0;width:100%;
}
li{
flex: 0 0 80px;
text-align: center;
line-height: 40px;
list-style: none;
padding-left: 20px;
padding-right: 20px;
font-size: 0.71rem;
justify-content:flex-start;
}
.liActive a {
color: #00965e;
}
a:link, .navbar a:active, .navbar a:visited {
color: #666;
text-decoration: none;
}
}
alist.js
import './alist.css'; const gItem = { title:'VSCode launch.json配置详细教程', content:'主要介绍了vscode 的node.js debugger 的 launch.json 配置详情,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一', time:'5月6日', size:'36mb', type:'pdf' } function AirticleItem(props){ return ( <div className="AirticleItem"> <div> <h5>{props.item.title}</h5> </div> <p> {props.item.content} </p> <div> <span>{props.item.time}</span> <span>{props.item.size}</span> <span>{props.item.type}</span> </div> </div> ); } function AList(props){ return ( <div> <AirticleItem item = {gItem}/> <AirticleItem item = {gItem}/> <AirticleItem item = {gItem}/> </div> ) } export default AList;
alist.less
.AirticleItem{
margin-left: 10px;
margin-top: 10px;
border-bottom: 1px solid #f0f0f0;
h5{
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
}
span{
min-width: 50px;
display: inline-block;
color: #6c757d !important;
font-size: 0.6rem;
}
p{
margin-top: 0px;
margin-bottom: 5px;
color: #6c757d !important;
font-size: 0.8rem;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
}
add.js
import './add.css' import MyEditor from './editordemo' function add(){ return( <div className="add"> <div className="head"> <label>返回</label> <label><b>添加文章</b></label> <label>确定</label> </div> <li> <label>标题</label> <input type="text" name="title" /> </li> <li> <label>类型</label> <select id="select-main"> <option>Hello</option> <option>HTML5</option> </select> </li> <li> <div id="myeditor1"> <MyEditor /> </div> </li> </div> ) } export default add;
add.less
.add{
font-size: 0.9rem;
.head{
border-bottom: 1px solid #00965e;
padding-bottom: 10px;
margin-bottom: 20px;
display:flex;
justify-content:space-between;
label{
display: inline-block;
margin: 7px;
}
}
li{
margin-top: 1.5rem;
padding-left: 0.5rem;
label{
display: inline-block;
width: 20%;
}
input{
width: 70%;
}
select{
width: 73%;
height: 1.4rem;
}
#myeditor1{
margin-top: 1.5rem;
border-top: solid 1px #aaa;
}
}
}
article.js
import './article.css' const item = { title:'VSCode launch.json配置详细教程', content:'主要介绍了vscode 的node.js debugger 的 launch.json 配置详情,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一', time:'5月6日', size:'36mb', type:'pdf' } function Article(props){ return( <div className="article"> <h5>{props.allp.title}</h5> <p>{props.allp.content}</p> <div> <span>{props.allp.time}</span> <span>{props.allp.size}</span> <span>{props.allp.type}</span> </div> <div className="comment"> <input type="text" name="title" /> <label> 评论</label> </div> </div> ) } function myArticle(){ return( <Article allp={item} /> ) } export default myArticle;
article.less
.article{
span{
min-width: 50px;
display: inline-block;
color: #6c757d !important;
font-size: 0.6rem;
}
.comment{
position:absolute;bottom:0;width:100%;
display: flex;
}
input{
width: 70%;
margin-left: 2%;
margin-bottom: 5px;
}
label{
margin-left: 20px;
font-size: 0.8rem;
}
}
editordemo.js
import 'braft-editor/dist/index.css' import React from 'react' import BraftEditor from 'braft-editor' export default class CustomDemo extends React.Component { render () { const controls = [ { key: 'bold', text: <b>加粗</b> }, 'italic', 'underline', 'separator', 'link', 'separator', 'media' ] return ( <div className="editor-wrapper"> <BraftEditor controls={controls} contentStyle={{height: 210, boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)'}} /> </div> ) } }
