openblog

Appearance

react笔记（一）：回顾 ​

图片

太久没有用react了，平常项目都是用vue居多，所以回顾一下react的基本知识

嵌套组件开发：利用props传递子组件

html
<div className="header" >
    {props.child}
</div>
<div className="header" >
    {props.child}
</div>

使用时：组件当做参数赋值即可

html
<Header child={<OpenNavbar/>}></OpenHeader>
<Header child={<OpenNavbar/>}></OpenHeader>

嵌套循环+条件判断渲染

html
<ul className="navbar-nav">
    {menus.map((item,i)=>{
    return  <li key={i}>
            {item.childs
               //三目运算符条件渲染，要有一个div包裹，不然会报错
            ?   <div>
                    <p>{item.title}</p>
                    <ul>
                        {item.childs.map((items,index)=>{
                            return <li key={index} >{items.title}</li>
                        })}
                    </ul>
                </div>
            : <div><p>{item.title}</p></div>
            }
            </li>
    })}
</ul>
<ul className="navbar-nav">
    {menus.map((item,i)=>{
    return  <li key={i}>
            {item.childs
               //三目运算符条件渲染，要有一个div包裹，不然会报错
            ?   <div>
                    <p>{item.title}</p>
                    <ul>
                        {item.childs.map((items,index)=>{
                            return <li key={index} >{items.title}</li>
                        })}
                    </ul>
                </div>
            : <div><p>{item.title}</p></div>
            }
            </li>
    })}
</ul>

类组件：

constructor构造函数，用来初始化组件数据

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用，类似vue的mounted钩子函数

componentDidUpdate()组件更新后调用

componentWillUnmount()组件卸载之前调用

初始化state：

js
constructor(props) {
    super(props);
    //初始化组件数据
    this.state = {date: new Date()};
 }
constructor(props) {
    super(props);
    //初始化组件数据
    this.state = {date: new Date()};
 }

修改state数据

js
this.setState({data: new Date()});
this.setState({data: new Date()});

本文到此结束。

反馈信息 ​

INFO

邮箱： open_teams@163.com