react学习前一部分

Posted 2021-05-14 cnchengv

引入   

 "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>
    )

  }

}