react--组件

最新推荐文章于 2022-03-03 14:52:52 发布
最新推荐文章于 2022-03-03 14:52:52 发布
阅读量151 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42176520/article/details/103807647
版权

组件间传值：

<!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>

 

 

 

 

人生如初见_张默
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-ace：React Ace组件
02-04
Ace的一组React组件 版本8注意！ ：我们已经停止了对Brace的支持，现在使用Ace-build。 请阅读有关如何迁移的文档。 示例正在更新。 安装 npm install react-ace ace-builds yarn add react-ace ace-builds ...
react-React水印组件支持图片水印文字水印
08-15
"react-watermark-module" 是一个专为此设计的React组件，它允许开发者轻松集成图片水印和文字水印功能。下面将详细阐述这个组件的核心特点、用法以及如何在实际项目中应用。 一、核心特点 1. **灵活性**：react-...
ReactJS入门之组件
Leon_Jinhai_Sun的博客
01-09 541
组件 组件是React中最重要也是最核心的概念，一个网页，可以被拆分成一个个的组件 在React中，这样定义一个组件： import React from 'react'; //第一步，导入React class HelloWorld extends React.Component { //第二步，编写类并且继承 React.Component render(){ //第三步，重写...
js的数组追加
milijiangjun的博客
02-22 1238
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script type="text/javascript"&gt;   fu
JS向数组里直接追加另一个数组的元素
xtho62的博客
03-03 6993
在Java语言里有一个api方法就是addAll可以直接追加另一个集合的元素进集合中，那么JS中应该怎么写呢？请看下文 ES5写法: let arr =[]; arr.push.apply(arr,[3,4]) console.log(arr) ES6写法 let arr = [1, 2]; arr.push(...[3, 4]); console.log(arr) ...
javascript两个数组内容合并
weixin_30399155的博客
09-24 175
需求： var arr1 = [1,2,3]; var arr2 = [4,5,6]; 最终结果: [1,2,3,4,5,6] 代码： Array.prototype.addAll= function(arr) { this.push.apply(this, arr); }; //使用以下代码即可实现合并 arr1.addAl...
js如何往数组Array（list）中添加元素
热门推荐
鑫中有你的博客
09-23 12万+
unshift：将参数添加到原数组开头，并返回数组的长度 pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined push：将参数添加到原数组末尾，并返回数组的长度 concat：返回一个新数组，是将参数添加到原数组中构成的 splice(start,deleteCount,val1,val2,…)：从start位置开始删除deleteCount项，并从
react-paypal-js:用于PayPal JS SDK的React组件
04-30
react-paypal-js 用于React组件为什么要使用react-paypal-js？问题与PayPal集成的开发人员应将JS SDK [removed]添加到网站，然后在脚本加载后呈现诸如PayPal Buttons之类的组件。 这种架构非常适合简单的网站，但是...
Simple-React-Image-Gallery：React教程文件，用于使用React组件创建图库
02-10
总的来说，`Simple-React-Image-Gallery`是一个强大且易于使用的React组件，它提供了一个简洁的接口来构建图片图库，同时还允许开发者通过props和回调函数实现高度定制。对于任何希望在React项目中集成图片展示功能...
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
02-05
react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑，路况，室内地图 内置...
List.addAll方法——添加所有元素到列表中
sinat_30474567的博客
02-10 8万+
addAll方法用于将指定 collection 中的所有元素添加到列表。 语法1  用于将指定collection中的所有元素添加到列表的尾部。如果List集合对象由于调用addAll方法而发生更改，则返回true。 addAll(Collection c) e：用于指定要将全部元素添加到列表中的collection。 示例  本示例使用List接口的实现类ArrayLi
js实现数组简单复制·并追加到后方
岁月如歌去，十年弹指间
10-11 3217
要求： var arr=[1,2,3,4,5]; //结果：arr=[1,2,3,4,5,1,2,3,4,5,]  
JavaScript之数组
沐唐风宋雨
08-18 313
var arr = ["a","b","c"];//for...in..遍历的是数组或对象的属性 for(var item in arr){ console.log(arr[item]) }var colors = ['red', 'green', 'blue']; colors.forEach(function (color) { console.log(color); });//fo
JS数组添加元素的三种方式
weixin_30436891的博客
01-25 1万+
1、push() 结尾添加 　　数组.push(元素) 参数描述 newelement1 必需。要添加到数组的第一个元素。 newelement2 可选。要添加到数组的第二个元素。 newelementX 可选。可添加多个元素。 2、unshift() 头部添加 　　数组.unshift(元素) 参数描述 neweleme...
JavaScript的数组中添加元素的方法小结
陌上花开7
05-11 1046
1、在数组的开头添加新元素 - unshift() var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple"); Result：Lemon,Pineapple,Banana,Orange,Apple,Mango 2、在数组的第2位置添加一个元素 - splice()
js 数组后面追加一个数组,连接数组
全易
09-21 5万+
方法： concat（） 示例： var a = [1,2,3]; var b = [4,5,6]; var c = a.concat(b); // a追加b的数组 conslle.log(c); // 输出结果：[1,2,3,4,5,6]
js 对数组的操作 add、delete、获取
weixin_33695082的博客
11-10 4103
2019独角兽企业重金招聘Python工程师标准>>> ...
react-native图片缩放组件
最新发布
05-22
React Native提供了一些用于缩放图片的组件，其中之一是`react-native-safe-area-context`库中的`SafeAreaImage`组件。这个组件可以帮助你在设备边缘安全区域内展示图片，并允许你进行缩放操作。 要使用`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值