码迷,mamicode.com
首页 > 其他好文 > 详细

快速上手React:

时间:2019-01-20 13:51:00      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:传值   私有   chat   struct   html   快速   构建   基础   关于   

React:快速上手(1)——基础知识

关于组件

定义组件

  React是一个用于构建用户界面的声明性,高效且灵活的JavaScript库。它允许您从称为“组件”的小而孤立的代码片段中组合复杂的UI

class ShoppingList extends React.Component{
    render(){
        return(
            <div className=‘shoppping-list‘>
                <h1>ShoppingList for MS</h1>
                <ul>
                    <li>QQ</li>
                    <li>Tim</li>
                    <li>WeChat</li>
                </ul>
             </div>
        )
    }
}

传值到组件中

 

设置组件状态来存储一些数据

  组件中的的state字段是可视为组件私有的可以用来存储数据的地方

class Square extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            value:null
        }
    }
    render(){
        return(
            <button className=‘square‘ onClick={()=>this.setState({value:‘X‘})}>
                {this.state.value}
            </button>
        )
    }
}

  

快速上手React:

标签:传值   私有   chat   struct   html   快速   构建   基础   关于   

原文地址:https://www.cnblogs.com/MrSaver/p/10294465.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!