导航:首页 > 方法技巧 > react如何调用其他类的方法

react如何调用其他类的方法

发布时间:2022-06-10 01:16:37

‘壹’ 使用react框架怎么进行组件的递归调用

JS有一种语法,叫做函数的尾递归(具体用法自己查)。
react组件本身不具备这些功能,需要自己用js控制业务逻辑。
例如有一个显示评论内容的组件,当客户端请求成功,并且返回多级json结构的时候,客户端就需要先判断结构有几层,然后用js控制加载的组件层次,将数据props过去。
一般的情况下,层数只有2,参考UC的评论模式,假设我写了一个评论,则为顶层,然后你可以在我的评论下面评论,这样就有了2层,但是别人又可以回复你的评论,这时就要注意了,别人回复你的评论还是在第2层,也就是说,任何人的评论都只在顶层之下的同一层,不会超出2层的结构,这样做才合理。像你说的那种,就是可以有几十上百层评论结构,那样显示就不好看了。。

‘贰’ reactjs怎么在方法里面调方法

调用函数 前加 this.
change(){
this.ff()
}
这样

‘叁’ 如何在React中调用微信的jsSDK

1. 微信JSSDK使用步骤简介

我们既然是在做基于微信的开发,当然就离不开微信的开发文档了。开始之前希望大家能先去看下《微信JS-SDK说明文档》。那么我们怎么样才能用上微信的JSSDK呢?以下基本步骤就是基于该文档的。

需要注意的是,如果本人下面的描述你看的有点云里雾里的话,我建议你:

‘肆’ react 父组件怎么调用子组件的方法

可以通过向子组件传入一个修改state的函数,比如如下代码:
父组件:

class Father extends Component {
construtor(props){
super(props);
this.state={
name: 'Peter',
age: '26'
}
}
onChangeState(stateName){
this.setState(stateName)
}
render(){
<p>姓名:{this.state.name}</p>
<p>年龄:{this.state.age}</p>
<Child onClicked={this.onChangeState.bind(this)}/>
}
}

子组件:

class Child extends Component {
render(){
<Button onClicked={()=>this.props.onClicked({name: 'John'})}/>
}
}

‘伍’ React 组件上调用方法如何传递参数,除了匿名函数用更好的方法吗

Java 应用程序按值传递参数(引用类型或基本类型),其实都是传递他们的一份拷贝.而不是数据本身.(不是像 C++ 中那样对原始值进行操作。)

例1:
Java代码
//在函数中传递基本数据类型,
public class Test {

public static void change(int i, int j) {
int temp = i;
i = j;
j = temp;
}

public static void main(String[] args) {
int a = 3;
int b = 4;
change(a, b);

System.out.println("a=" + a);
System.out.println("b=" + b);
}
}

结果为:
a=3
b=4
原因就是 参数中传递的是 基本类型 a 和 b 的拷贝,在函数中交换的也是那份拷贝的值 而不是数据本身;

例2:
Java代码
//传的是引用数据类型
public class Test {

public static void change(int[] counts) {
counts[0] = 6;
System.out.println(counts[0]);
}

public static void main(String[] args) {
int[] count = { 1, 2, 3, 4, 5 };
change(count);
}
}

在方法中 传递引用数据类型int数组,实际上传递的是其引用count的拷贝,他们都指向数组对象,在方法中可以改变数组对象的内容。即:对复制的引用所调用的方法更改的是同一个对象。

‘陆’ react native static怎么调用外部方法

Annotation所修饰的对象范围:Annotation可被用于packages、types(类、接口、枚举、Annotation类型)、类型成员(方法、构造方法、成员变量、枚举值)、方法参数和本地变量(如循环变量、catch参数)。在Annotation类型的声明中使用了target可

‘柒’ react中怎么调用别人的接口进行跳转

RN自带了一个非常优雅的网络操作库fetch,下面的这个例子从gankio的接口拿到了美女图片的url然后通过state 传给列表组件,列表里返回图片组件显示图片。网络数据获取方法写在componentDidMount中,这个方法是组件生命周期中需要调用的一个方法。
class AwesomeProject extends Component {// 初始化模拟数据

constructor(props) {
super(props);

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {r1 !== r2}});
this.state = {
dataSource: ds,
load:false,
text:''
};
}

//耗时操作放在这里面
componentDidMount(){
this.getNet();
}

getNet(){
fetch('http://gank.io/api/search/query/listview/category/福利/count/10/page/1')//请求地址
.then((response) => response.json())//取数据
.then((responseText) => {//处理数据
//通过setState()方法重新渲染界面
this.setState({
//改变加载ListView
load: true,
//设置数据源刷新界面
dataSource: this.state.dataSource.cloneWithRows(responseText.results),
})

})
.catch((error) => {
console.warn(error);
}).done();
}

render() {
if(this.state.load){
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData)=>
<View>
<Image
style={{ width: 400, height: 250, marginTop: 5 }}
source={{uri:rowData.url}}/>
</View>}
/>
</View>
);
} else{
return(
<View>
<Text>loading......</Text>
</View>
);
}
}
}

‘捌’ react 调用方法

情况一:
constructor(props) { super(props); this.login = this.login.bind(this);
}

login(a,b,c) { console.log(this);//打印这个组件本身
console.log(a);//打印111111
console.log(b);//undefined
console.log(c);//undefined}
<button onClick={()=>{this.login(111111)}} />

情况二:
constructor(props) { super(props); this.login = this.login.bind(this);
}

login(a,b,c) { console.log(this);//打印这个组件本身
console.log(a);//打印Proxy对象:Proxy里面可以获得dom元素
console.log(b);//打印event
console.log(c);//undefined}
<button onClick={this.login} />

情况三:
constructor(props) { super(props); // this.login = this.login.bind(this);}

login(a,b,c) { console.log(this);//打印这个组件本身,说明我们用箭头函数的时候,不需要bind(this),react自动把this指向了组件自己,
console.log(a);//打印出了111111
console.log(b);//undefined
console.log(c);//undefined}
<button onClick={()=>{this.login(111111)}} />

情况四:
constructor(props) { super(props); // this.login = this.login.bind(this);}

login(a,b,c) { console.log(this);//打印null,这是react最常见的坑,this本来指向window,但是经过react初始化之后,指向了null;
console.log(a);//打印Proxy对象:Proxy里面可以获得dom元素
console.log(b);//打印event
console.log(c);
}
<button onClick={this.login} />

情况五:
constructor(props) { super(props); // this.login = this.login.bind(this);}

login(a,b,c) { console.log(this);//打印这个组件本身
console.log(a);//undefined
console.log(b);//undefined
console.log(c);//undefined}
<button onClick={()=>{this.login()}} />

情况六:(可以算作es5的最佳实践,用的es5的方法,拿到所有参数)
constructor(props) { super(props); // this.login = this.login.bind(this);
this.login=(a,b,c)=>{ console.log(this);//打印这个组件本身
console.log(a);//111111
console.log(b);//打印Proxy对象:Proxy里面可以获得dom元素
console.log(c);//打印event:
}
}
<button onClick={this.login.bind(this,111111)} />

最佳实践:(for es6) 老版本
constructor(props) { super(props); // this.login = this.login.bind(this);}

login(type,event,proxy) { console.log(this);//打印这个组件本身
console.log(event);//打印event:
console.log(proxy);//打印Proxy对象,event详情请查验es6}
<button onClick={()=>{let target=this, handler={};this.login('boss',event,new Proxy(target, handler))}}/>

最佳实践:2018(需要传参)
constructor(props) { super(props);
}

login=(num, evt)=>{ console.log(num);//打印传参
console.log(evt);//打印event:}
<button onChange={this.login.bind(null, 111)}/>

最佳实践:2018(不需要传参)
constructor(props) { super(props);
}

login=( evt)=>{ console.log(evt);//打印event:}
<button onChange={this.login}/>

阅读全文

与react如何调用其他类的方法相关的资料

热点内容
圣荷纳米霜使用方法 浏览:166
货车多利卡打不着火解决方法 浏览:395
韩束紧致水分面膜使用方法 浏览:112
摩托车前叉连接方法 浏览:427
交流和直接的电流计算方法 浏览:465
龟田锻炼身体的方法 浏览:766
曾仕强怎么使自己开悟的方法 浏览:251
大拇指甲沟炎治疗方法 浏览:911
高中数学解题方法技巧汇总 浏览:330
u盘扩展内存方法手机 浏览:36
除螨包的最佳方法 浏览:24
瓷砖鱼池漏水最简单的补漏方法 浏览:16
智能化方法如何帮助开发软件 浏览:360
卷闸门的开关安装方法 浏览:795
汽车纽扣电池的安装方法 浏览:892
斗地主快速学会的方法 浏览:879
钢梁安装方法如何做挠度实验 浏览:228
砂砾压实度检测方法 浏览:900
黑底白字解决方法 浏览:747
杭州电脑数据恢复方法 浏览:493