react组件基本用法示例小结


Posted in Javascript onApril 27, 2020

本文实例讲述了react组件基本用法。分享给大家供大家参考,具体如下:

组件间传值:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app">
 
</div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
  class Com extends React.Component {
    click = ()=>{
      // console.log(this.input);
      // console.log(this.p.innerText);
      console.log(this.refs.my.value);//父组件访问子组件用refs
    };
 
    render() {
      return (
        <div>
          <input type="text" ref={(input)=>{this.input=input}}/>
          <p ref={(p)=>{this.p=p}}>我是段落</p>
          <input type="text" ref="my"/>
          <button onClick={this.click}>点击</button>
        </div>
      );
    }
  }
 
  ReactDOM.render(<Com/>,document.getElementById('app'));
</script>
</body>
</html>

列表:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
  class Add extends React.Component {
    click = ()=>{
      this.props.allAdd(this.input.value);
    };
    render() {
      const {length} = this.props;
      return (
        <div>
          <input type="text" ref={(input)=>{this.input=input}}/>
          <button onClick={this.click}>add{length}</button>
        </div>
      )
    }
  }
 
  class List extends React.Component {
    render() {
      const {list} = this.props;
      return (
        <div>
          <ul>
            {
              list.map((v,i)=>{
                return <li key={i}>{v}</li>
              })
            }
          </ul>
        </div>
      )
    }
  }
 
  class App extends React.Component {
    state = {
      list:['吃饭','睡觉','打游戏','游泳']
    };
    add = (value)=>{
      const {list} = this.state;//获取原先的list
      list.unshift(value);//将添加的值传入list
      this.setState(list);//重新设置list
    };
    render() {
      const {list} = this.state;//获取list
      return (
        <div>
          <Add allAdd={this.add} length={list.length}/>
          <List list={list} />
        </div>
      )
    }
  }
 
  ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>

受控组件和非受控组件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
  class Com extends React.Component {
    state = {
      age:''
    };
    //非受控组件 不受state控制
    click = () => {
      console.log(this.input.value);
    };
    change = (event)=>{
      console.log(event.target.value);
      this.setState({
        age: event.target.value
      })
    };
    render() {
      const {age} = this.props;
      return (
        <div>
          姓名:<input type="text" ref={(input)=>{this.input=input}}/>
          <button onClick={this.click}>获取姓名</button>
          年龄:<input type="text" value={age} onChange={this.change}/>
        </div>
      );
    };
  }
  ReactDOM.render(<Com />,document.getElementById('app'));
</script>
</body>
</html>

组件生命周期:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
  class Com extends React.Component {
    state = {
      msg:123
    };
 
    sing() {
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('唱一首歌');
        },1000);
      })
    };
 
    async get() {
      await this.sing().then((res)=>{
        console.log(res);
      });
    };
 
    componentWillMount() {
      //will会先执行,但不一定先执行完毕
      console.log('之前');
      // this.get();
    }
 
    componentDidMount() {
      //进行ajax操作,获取后台数据
      console.log('之后');
    }
 
    shouldComponentUpdate(nextProps, nextState) {
      const {msg} = this.state;
 
      //如果没有
      if ({msg} !== nextState) {
        return true;
      }
      console.log('更新');
      return false;
    }
 
    componentWillUpdate() {
      console.log('更新之前');
    }
 
    componentDidUpdate() {
      console.log('更新之后');
      //再次获取数据
    }
 
    click = ()=>{
      this.setState({
        msg: 234
      })
    };
 
    render() {
      console.log('render');
      const {msg} = this.state;
      return(
        <div>
          <h1>{msg}</h1>
          <button onClick={this.click}>更新</button>
        </div>
      )
    }
  }
 
  ReactDOM.render(<Com />,document.getElementById('app'));
</script>
</body>
</html>

希望本文所述对大家react程序设计有所帮助。

Javascript 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
判断访客终端类型集锦
Jun 05 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
react基本安装与测试示例
Apr 27 #Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 #Javascript
JS浏览器BOM常见操作实例详解
Apr 27 #Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 #Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 #Javascript
JS严格模式原理与用法实例分析
Apr 27 #Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 #Javascript
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php创建多级目录的方法
2015/03/24 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
vue实现点击图片放大效果
2017/08/15 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
JS实现li标签的删除
2019/04/12 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python写入CSV文件的方法
2015/07/08 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python3.4爬虫demo
2019/01/22 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
python plotly画柱状图代码实例
2019/12/13 Python
如何使用python传入不确定个数参数
2020/02/18 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
pandas实现导出数据的四种方式
2020/12/13 Python
介绍一下内联、左联、右联
2013/12/31 面试题
药品采购员岗位职责
2014/02/08 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
库房管理员岗位职责
2015/02/12 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
gojs实现蚂蚁线动画效果
2022/02/18 Javascript