JSX样式以及注释

在我们写代码的时候,难免要为了代码以后的维护或者调试,需要注释掉某一段代码,或者一些提示信息,那么JSX的注释,是用 {/**/} 来注释。(//双斜杠不知道行不,我没试出来...)
PS:但是这种样式的注释(下面的代码),是在div代码块(一个react组件)内的注释,必须用花括号括起来,如果是在div代码块外的就不需要花括号了
下面的例子

ReactDOM.render(
    /*这是正确的注释*/
    <div>
    /*这是错误的注释*/
    {/*这是正确的注释*/}
        <p>1+1={1+1}    {/*这是正确的注释*/}   </p>
        <p>     {/*1-1={1-1}*/}    </p>
        <p>2*2={2*2}</p>
        <p>4+2={4+2}</p>
        <p>5%3={5%3}</p>
    </div>,
    document.getElementById('demo')
);

输出效果:

捕获.PNG

我们写页面离不开css样式,在JSX里关键字是JS的书写方法比如fontSize,格式是对象的形式,并且尺寸是不需要单位的哦。值的话,只要不是数字都是用字符串的处理方式加上引号或者双引号。另外注意最后的调用样式方法,是:style={}
看个栗子:

var myStyle = {
    width:300,
    height:300,
    fontSize:20,
    paddingTop:50,
    textAlign:'center',
    color:'#fff',
    background:'#000'
}
ReactDOM.render(
    <div style={myStyle}>我是小栗子</div>,
    document.getElementById('demo')
);

输出效果:


样式.PNG

react推荐css样式用内联样式。感觉这样修改组件,比较方便吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,297评论 2 21
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,494评论 1 10
  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 3,595评论 1 11
  • react 基本概念解析 react 的组件声明周期 react 高阶组件,context, redux 等高级...
    南航阅读 1,090评论 0 1
  • 还是常常到月底还不起信用卡,还是看着日渐走高的房价望洋兴叹,虽然这样,但依然觉得生活在了最好的时代。 从小一起长大...
    拟孖阅读 312评论 0 0