RN开发-JSX基础语法

1、环境
       react.js
       react-dom.js
       browser.min.js(解码器)

   2、载入方式
       内联、外联

   3、标签
       HTML，ReactJS自定义组件类

   4、转换器（解析器）
       <h1>zxx</h1> --> React.createElement("h1",null,"zxx");
       返回一个ReactElement对象
       第一个参数：标签
       第二个参数：标签属性
       第三个参数：标签值

   5、执行JavaScript表达式
       var msg = "zxzxzx";
       <h1>{msg}</h1> --> React.createElement("h1",null,msg);

   6、注释
       // 和 /* */

   7、属性
       var msg = <h1 width="10px">zxzxzx</h1>
       --> React.createElement("h1",{width:"10px"},"zxzxzx")

   8、延展属性
       使用ES6语法 (...循环遍历，=>箭头函数)
       var props={};
       props.foo="1";
       props.bar="1";
       <h1 {...props} foo="2">zxzxzx</h1>
       --> React.createElement("h1",React.__spread({},props,{foo:"2"}),"zxzxzx")

   9、自定义属性
       data- 开头的自定义属性，可以渲染到页面
       <h1 height="10px" data-test="test" test="zxx"></>
       其中data-test会渲染到页面，test不会

   10、显示HTML字符串
       借助属性： _html
       <div>
           {{_html:'<h1>zxzxzx</h1>'}}
       </div>

   11、样式使用
       通过style属性定义
       <h1 style={{color:'#ff0000',fontSize:'14px'}}></h1》
       外层{} JSX语法
       内层{} JavaScript对象

   12、事件绑定
   <script>
       function testClick(){}
       var app = <button onClick={testClick.bind(this)}
                   style{{height:'100px'}}>点击</button>
       React.render(app,document.findElement("demo"));
   </script>

巴特西

RN开发-JSX基础语法

最新文章

热门文章