React入门

时间  2019-12-11
标签 react 入门 栏目 React 繁體版
原文   原文链接

http://www.ruanyifeng.com/blog/2015/03/react.htmljavascript

 
ReactDOM.render 是React的最基本的方法，用于将模板转为HTML语言，并插入制定的DOM节点中。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <scriptsrc="../build/react.js"></script>
  5. <scriptsrc="../build/react-dom.js"></script>
  6. <scriptsrc="../build/browser.min.js"></script>
  7. </head>
  8. <body>
  9. <divid="example"></div>
  10. <scripttype="text/babel"><!--React独有的JSX语法，须要的type 为text/babel 凡是使用JSX语法的 type都是这个-->
  11. ReactDOM.render(
  12. <h1>Hello, world!</h1>,
  13. document.getElementById('example')
  14. );
  15. </script>
  16. </body>
  17. </html>
 
JSX语法，html语言直接写在 javascript代码中， 不加任何引号，支持html和js的混写，
遇到html标签（以   <  开头），就以html解析，遇到代码块 （以 {  开头 ） 则以JavaScript 规格解析；
  1. <script type="text/babel">
  2. var names =['Alice','Emily','Kate'];
  4. ReactDOM.render(
  5. <div>
  6. {
  7. names.map(function(name){
  8. return<div>Hello,{name}!</div>
  9. })
  10. }
  11. </div>,
  12. document.getElementById('example')
  13. );
  14. </script>
 
JSX语法容许直接在模板插入 javascript变量，若是这个变量是数组，则会展开这个数组的所有成员；
  1. <script type="text/babel">
  2. var arr =[
  3. <h1>Hello world!</h1>,
  4. <h2>React is awesome</h2>,
  5. ];
  6. ReactDOM.render(
  7. <div>{arr}</div>,
  8. document.getElementById('example')
  9. );
  10. </script>
 
 
 
组件 
React容许将代码封装成组件（component） ，而后像插入普通HTML标签同样，在网页中插入这个组件。
React.createClass 方法就是用来生成这个组件类的；
 
  1. <script type="text/babel">
  2. varHelloMessage=React.createClass({
  3. render:function(){
  4. return<h1>Hello{this.props.name}</h1>;
  5. }
  6. });
  8. ReactDOM.render(
  9. <HelloMessage name="John"/>,
  10. document.getElementById('example')
  11. );
  12. </script>
上面代码中，变量 HelloMessage 就是一个组件类， 模板插入 <HelloMessage />变回自动建立一个这样的实例，
全部组件类都有本身的render方法，用于输出组件；
组件的第一个字母必须大写，不然会报错，另外 组件类只能保安一个顶层标签（只能有一个顶层标签，而后包含不少子标签） ，不然也会报错。
 
组件的用法和原生HTML标签彻底一致，能够任意的加入属性，好比 name属性，组件的属性能够在组件类的this.props 对象上获取， 可是  class 属性和for属性 在组件属性中，名称分别改成了  className  htmlFor  由于 class 和for是javascript 的保留字。
 
 
this.props.children 
this,props 对象的属性与组件一一对应 可是有一个例外 就是 this.props.children 属性，它表示组件的全部子节点 
  1. <script type="text/babel">
  2. varNotesList=React.createClass({
  3. render:function(){
  4. return(
  5. <ol>
  6. {
  7. React.Children.map(this.props.children,function(child){
  8. return<li>{child}</li>;
  9. })
  10. }
  11. </ol>
  12. );
  13. }
  14. });
  16. ReactDOM.render(
  17. <NotesList>
  18. <span>hello</span>
  19. <span>world</span>
  20. </NotesList>,
  21. document.getElementById('example')
  22. );
  23. </script>
this.props.children 的值有三种可能，若是当前组件没有子节点，他就是 undefind ，若是有一个子节点，数据类型是object 若是有多个子节点  那么它就是 array 。。。
 
React 提供了一个工具方法， React.Children 来处理 this.props.children 咱们能够用 React.Children.map来遍历子节点 
不用担忧 this.props.children 的数据类型了~
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程