ReactA初相识

最新推荐文章于 2022-11-22 22:35:29 发布

小小码农2

最新推荐文章于 2022-11-22 22:35:29 发布

阅读量270

点赞数

分类专栏： react 保存

本文链接：https://blog.csdn.net/qq_16581337/article/details/56693133

版权

保存同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

[参考地址]{http://www.ruanyifeng.com/blog/2015/03/react.html}

跟着写代码直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
</head>
<body>
<div>
    上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

</div>
<div id="example1"></div>

 <script type="text/babel">
     var name=['Alice','Toma','kate'];
     ReactDOM.render(
             <div>
                 {
                     name.map(function (name) {
                         return <div>    Hello {name}</div>

                     })
                 }
             </div>,
     document.getElementById('example1')
     );
 </script>
<div>JSX允许直接直接在模板插入Javascript变量如果这个变量是一个数组，则会展开这个数组的所有成员</div>
  <div id="example2"></div>
 <script type="text/babel">
     var    arr=[<h1>hello</h1>,<h1>world</h1>,<h1>React</h1>];
     ReactDOM.render(
           <div> {arr}</div>,
         document.getElementById('example2')
     );
 </script>
 //组件React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
 // 注意,组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage,另外组件类只能包含一个顶层标签,否则也会报错
<div id="example3"></div>
<script type="text/babel">
   //代码封装一个组件
    var HelloMessage=React.createClass({
        //每个组件必须有自己的render方法，用来输出组件
            render:function () {
                return  <view><h1>ljl</h1> <h1>xuexi</h1><h1>react</h1> </view>
            }

    });

     ReactDOM.render(
         //组件的用法于原生的HTML标签一样使用，可以随意的添加属性，组件的属性可以在组件类的this.prop对象上获得
         <HelloMessage name="adsadas" age="20"/>,
          document.getElementById('example3')

     )

</script>
//this.props.children 组件的所有子节点
<div id="example4"></div>
<script type="text/babel">
 //创建一个组件
    var NodesList=React.createClass({
        //每个组件必须有一个render来输出组件
        render:function () {
             return <ol>{
                 // React.Children 来处理 this.props.children React.Children.map 来遍历子节点
                       React.Children.map(this.props.children,function (child) {

                           return<li>{child}</li>
                       })

             }</ol>
        }

    });
   ReactDOM.render(
       <NodesList>
           <span>hello</span>
           <span>world</span>
       </NodesList>,
         document.getElementById('example4')
   );

</script>
//组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
//PropTypes  组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求


</body>
</html>

小小码农2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ReactA初相识

[参考地址]{http://www.ruanyifeng.com/blog/2015/03/react.html}跟着写代码直接上代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="react.js"></script>
复制链接

扫一扫