美文网首页
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