react 基础篇

react 初学

2018/10/27/ 10:18:59

react 基础常识

1. jsx 语法及使用规范
   1. jsx 是被使用在模板中的，也就是 return( jsx 写在这里 )
   2. 变量这样写{value}, 执行js基础操作这样写{ 1 + 1 }， 还可传入数组，jsx会自动展开数组

      	render(){
      		var arr = [<div>我是div</div>, <p>我是p</p>, <span>我是span</span>]
      		return（
      				<div>{arr}</div>
      		）
      	}
      

   3. 书写内联样式时
      • 注意事项1: css 与变量不同，需要变成{{}}
{{这里写 css}}
      • 注意事项2
        • 像 text-align background-color这样的css名称需要变化为 textAlign和backgroundColor
        • 使用驼峰命名camelCase

        		var arr = [<div>我是div</div>, <p>我是p</p>, <span>我是span</span>]
        		return（
        				<div style={{textAlign:"center"}}>{arr}</div>
        		）
        

      • 注意事项3

        	{{color: "red"}}     css名称不需要加引号
        	{{fontSize: 20}}   表示 大小的样式 不加 px时不需要加引号，
            {{width: "20px"}} 如果加了px就需要加上引号
        	
        

      • 代码示例

            let c = {backgroundColor:"green", textAlign:"center"};
            let arr = [<div>我是div</div>, <p>我是p</p>, <span>我是span</span>]
            return(
              <div style={c}>
              	{arr}
              	<span style={{fontSize: 10}}></span>
              </div>
            )
        

      4. 使用外联样式，需要先引入css文件，后使用 className标识

         		import "./index.css"
         		...
         		<span className="btn-1">
         

react 常见的报错

1. 函数需要使用 驼峰命名法CamelCase

2. 自定义的类首字母应该大写，因为这样才能区分该组件是自定义还是html标签

3. 在一个函数或类，return 的html 应该是一个整体，否则会报错

   • 错误代码

     	return(
     		<div>我是张啥子</div>
     		<p>这样写是错误的</p>
     	)
     

   • 报错信息
     
   • 正确代码

     	return(
     		<div>
     			<div>我是张啥子</div>
     			<p>这样写是错误的</p>
     		</div>
     	)
     

4. 通过 style 添加内联样式的时候，容易犯的错误。

   • 错误：

     	ReactDOM.render(
     	    <h1 style = {fontSize:12}>菜鸟教程</h1>,
     	    document.getElementById('example')
     	);
     

   • 正确：

     	ReactDOM.render(
     	    <h1 style = {{fontSize:12}}>菜鸟教程</h1>,
     	    document.getElementById('example')
     	);