美文网首页
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 使用技巧

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