react 基础

数字云翼客
• 阅读 1012

1、render 函数 里面只能用一个标签

//正确
render () {
    return (<div>hello<div>)
}
//错误
render () {
    return (
        <div>hello<div>
        <div>world<div>
    )
}

2、state在组件在的定义、使用、以及改变

  • 定义
//在constructor函数中定义
constructor ( props ) {
    super(props);
    this.state = {
        inputValue:"",
        list:[]
    }
}
  • 使用
<input value = { this.state.inputValue} />
  • 改变
<input value = { this.state.inputValue} onChange = {this.changeInput.bind(this)} />
//方法一
changeInput(e){
    this.setState({
        inputValue:e.target.value
    })
}
//方法二
changeInput(e){
    const value = e.target.value;//需要保存变量,不能在下面直接用e.target.value,或者会报错
    this.setState(()=>({
        inputValue:value
    }))
}

3、注释写法

{/*注释*/}
//或者
{
//注释
}

4、css中的class与es6的class冲突,改用className来代替

5、laber标签和input做关联是所用的for 要用htmlFor来代替

6、父组件传值给子组件

//父组件通过属性的方式传给子组件
//父组件
<todoList content = {item} />
//子组件接受则用props
//子组件
<div>{this.props.content}</div>

7、子组件像父组件传参

//父组件通过属性传父组件的方法给子组件(注意:必须bind(this),否则子组件this指向有问题)
//父组件
<todoList delete = {this.delete.bind(this)} />
//子组件接受
delete(){
    this.props.delete();
}

8、PropTypes和defaultProps进行类型检查

查考文档链接描述
//子组件
import PropTypes from 'prop-types';
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

9、refs获取dom

参考文档链接描述
点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
4年前
React事件绑定的几种方式
一、React事件是什么在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick最简单的事件绑定如下:class ShowAlert extends React.Component  showAlert()     console.log("HelloWorld");    render()  
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Stella981 Stella981
3年前
Flask 【第四篇】使用Flask的扩展实现简单页面登录功能
fromflaskimportFlask,render_template,request,redirect,sessionappFlask(__name__,template_folder'templates')app.secret_key"sdsfdsgdfgdfgfh"@app.befo
Stella981 Stella981
3年前
React的Element的创建和render
React的Element是React应用程序的最小构建块,它是用来描述我们在屏幕上看到的浏览器页面上的内容。在React中构建Element 有两种方式:1、JSX的方式,JSX不是React的必用技术,但它可以用来产生一个React“element”.constelement(<h1className"
Wesley13 Wesley13
3年前
1.3:Render Pipeline and GPU Pipeline
在学习SubShader之前,我们有必要对RenderPipeline(渲染流水线)和GPUPipeline(图形硬件流水线)有一个比较细致的了解。这是一篇干货,内容主要参考了《UnityShader入门精要》、《RealTimeRendering》以及众多博客,其中加入了一些个人的见解,里面涉及到的知识能够为我们以后的Sh
Stella981 Stella981
3年前
React应用渲染界面的入口
jsx代码:varReactrequire('react');varReactDOMrequire('reactdom');varMyButtonControllerrequire('./components/MyButtonController');ReactDOM.render
Stella981 Stella981
3年前
React.render和reactDom.render的区别
这个是react最新版api,也就是0.14版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和reactdom两个部分。这样就为web版的react和移动端的ReactNative共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。 新的react包包含了React.crea
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
3年前
Qt 使用openGL 渲染YUV420P格式的视频
代码如下YUV420P_Render.hifndefYUV420P_RENDER_HdefineYUV420P_RENDER_Hinclude<QObjectinclude<QOpenGLWidgetinclude<QOpenGLFunctions
Stella981 Stella981
3年前
Riot.js源码阅读
Riot.js的版本是1.0.4。官网地址:https://muut.com/riotjs整个Riot.js只有3个可以在外面调用的函数接口,分别是observable、render、route。 1、observable函数observable函数只有一个参数el,指向Model,该
黄忠 黄忠
2年前
2023 React 18 系统入门 进阶实战《欢乐购》
React18新特性自动批处理(AutoBacthing)download:https://www.sisuoit.com/4132.html批处理是React将多个状况更新分组到一个从头烘托中,以取得更好的功能(削减render次数)。在React18曾
数字云翼客
数字云翼客
Lv1
少而不学,老而无识。少壮不努力,老大徒伤悲。
文章
5
粉丝
0
获赞
0