美文网首页
ReactJs 使用技巧

ReactJs 使用技巧

作者: 朗迹张伟 | 来源:发表于2018-10-27 17:47 被阅读10次
  1. JSX注释{/注释/}
  2. JSX里的style设置
    <code>
    <div style={{color:#333}}>或 var styleObj = {color:#333}return <div style={styleObj }>
    </code>
  3. onClick等触发事件传递参数例如<a onClick={this.onMsg.bind(this, "hello", "world")}>在响应函数里,直接写两个参数即可onMsg:function(p1, p2){ alert(p1+" "+p2);}
    4.多个JSX文件(在atorm-electron中)例如<script type="text/babel" src="admin/view/main.js"></script><script type="text/babel" src="admin/view/frame.js"></script> 在main.js里使用window.ReactXX来命名变量即可5.JSX里的保留字另外组件DOM元素上的 class属性需要写成 className ,for 属性需要写成 htmlFor6.JSX里的延展属性JSX可以使用ES6的语法,例如var props = {};
    props.foo = "1";
    props.bar = "1";
    var msg = <h1 {...props} foo="2">ReactJs</h1>;

{...props}会遍历并转换成h1属性,foo=“2”在后面,又会覆盖前的foo属性7.JSX里的data-属性
JSX里的data-属性会被渲染到页面上,其他属性,如test="test"是不会被渲染到页面的上的 8.JSX里的显示HTML字符串
<div>{{_html:'<h1>ReactJs</h1>'}}</div> 9.父组件调用子组件的方法
在子组件里写ref="nm", 在父组件里,通过this.refs.nm获得子组件的属性与方法,然后调用执行;

相关文章

  • ReactJs 使用技巧

    JSX注释{/注释/} JSX里的style设置 或 var styleObj = {color:#333}re...

  • ReactJS初探(一)

    前端项目打算使用ReactJS+Webpack+ant-design来做。ReactJS的官网:https://r...

  • ReactJS-轮播图

    做一个基于ReactJS的轮播图组件 使用

  • 使用ReactJs的感受

    最近使用react做了一个人事管理平台的单页面应用(SPA),最开始的时候,是使用avalonjs,后台因为老板喜...

  • ReactJs

    reactJs 用于创建用户界面的框架 使用jsx语法(javascript + xml) 页面引入: 页面依次...

  • 基本列表组件,键

    https://reactjs.org/docs/lists-and-keys.html 数组中使用的键在同级之间...

  • ReactJS初探(二)

    前端项目打算使用ReactJS+Webpack+ant-design来做。 webpack+react+es6的配...

  • 【React】ReactJS序列 组件的key

    时间:2016-08-17 20:20:55作者:zhongxia 概要 使用ReactJs 来构建项目, 已经半...

  • 第一节——Hello World

    最容易的开始学习React的方式就是使用这个在CodePen(https://reactjs.org/redire...

  • 填坑之路:React状态管理

    文中涉及的React demo代码使用了16.8的新增特性Hooks[https://reactjs.org/do...

网友评论

      本文标题:ReactJs 使用技巧

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