美文网首页
react.js的组件化

react.js的组件化

作者: madisn | 来源:发表于2017-08-31 20:09 被阅读98次

    react.js只是一个库,并不是一个框架,只提供UI层面的解决方案,一个完整的react项目需要结合其他库完成,例如Redux,React-router等.
    在react.js中一切都是组件,在编写react.js组件的时候,一般需要继承react.js的Component,该方法按照我的理解是创建有个基于此的类,然后一定要有一个render方法必须返回一个JSX元素,
    eg:

    class TestComponent extends Component{
          render(){
                return(
                      <div>
                            <div>one</div>
                            <div>one</div>
                      </div>
            )
        }
    }
    

    前面已标注一个,返回多个的话会报错,所以如果写多个标签的话,最外层用一个标签包裹起来.
    上面的例子中可以看到其中有JavaScript也有html代码,这种形式就是JSX格式,如果不懂这种格式化,建议自己慢慢理解,自己去查资料领悟这种JavaScript里包含HTML的形式.
    不过简单来说就是在JSX文件中,在浏览器解析时遇到{}会解析成JavaScript,遇见<>会解析成HTML,所以这种形式十分灵活.
    在这种形式里写HTML有两点需要注意的地方:

    1.不能使用class给元素添加类名,因为class是JavaScript的关键字(构造类),所以添加类名时要是用className
    2.for属性也是不能再HTML里写的,比如<label for='one'>one</label>,因为for也是JavaScript的关键字,所以在JSX中用htmlFor代替

    一个完整的组件还包含其他东西,这一章就这样了

    相关文章

      网友评论

          本文标题:react.js的组件化

          本文链接:https://www.haomeiwen.com/subject/bdpqjxtx.html