react 基础篇

  • Z时代
  • 2024-01-10
  • 分类：综合

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-alignbackground-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>
            )

      1. 使用外联样式，需要先引入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')
      	);

以上是 react 基础篇 的全部内容， 来源链接： utcz.com/z/382316.html

回到顶部