JSX样式以及注释

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

ReactDOM.render(
    /*这是正确的注释*/
    
/*这是错误的注释*/ {/*这是正确的注释*/}

1+1={1+1} {/*这是正确的注释*/}

{/*1-1={1-1}*/}

2*2={2*2}

4+2={4+2}

5%3={5%3}

, document.getElementById('demo') );

输出效果:

JSX样式以及注释_第1张图片
捕获.PNG

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

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

输出效果:


JSX样式以及注释_第2张图片
样式.PNG

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

你可能感兴趣的:(JSX样式以及注释)