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 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
分析JS中this引发的bug
Dec 12 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 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
PHP解析目录路径的3个函数总结
2014/11/18 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
php swoft框架实例用法
2020/12/22 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python 元类使用说明
2009/12/18 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
详解Python爬虫的基本写法
2016/01/08 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python树的同构学习笔记
2019/09/14 Python
学习python需要有编程基础吗
2020/06/02 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
医学类个人求职信范文
2014/02/05 职场文书
买房协议书
2014/04/11 职场文书
社区活动策划方案
2014/08/21 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS