react native 封装组件以复用

最新推荐文章于 2022-04-22 15:44:37 发布

原创最新推荐文章于 2022-04-22 15:44:37 发布 · 598 阅读

CC 4.0 BY-SA版权

本文探讨了JavaScript中函数参数的传递方式及其在不同场景下的应用，包括默认参数值设定、方法调用及匿名函数的使用等核心概念。

 _onPressHandler({
        click = {}
    } = {}) {
        click();
    }
    render() {
        const {text, click} = this.props;
        return (
            <TouchableOpacity onPress={() => this._onPressHandler({
                click: function () {
                    if (typeof(click) == 'function') {
                        click();
                    }
                }
            })} style={styles.myClickButton} autoFocus={true} >
                        <Text style={styles.buttonTitle}>{this.props.text}</Text>
            </TouchableOpacity>
        ) ;
    }
}

class AAAA {
_on({
click = {}
} = {}) {
alert(1)
}

bbbb(){
let a = {};
this._on(a);
1. 当我调用时不传递参数，默认传递了空对象
this._on();
this._on({});
2. 传递过去的参数只有当你使用了才有意义
3. 你想象为一个轻量的方法，如
_onTest(c1) {
console.log(c1)
}
_onTest(1);
_onTest('1');
_onTest({}); 空对象
4. 传递的参数可以是json，num，string
5. 传递json或其他任意数据类型时候，
可以定义它的默认值(在没有传递参数的情况下)
_onTest(c1 = '8') {
console.log(c1)
}
_onTest() 打印8
_onTest(7) 打印7
6. 同样的道理
_onTest(c1 = {}) {
console.log(c1)
}
_onTest({
a: 1,
b: 2,
clicksss: {}
} = {}) {
console.log(a)
console.log(b)
console.log(clicksss)

clicksss(); // 如果传递的是方法
clicksss(); // 如果传递的不是方法，即为 {}()

{}() // 什么都不运行，为空方法
}
}
}
class BBB {
_on({
click = {}
} = {}) {
click();
}
render() {
if (typeof(this.props.clicks) == 'funtion') {
this.props.clicks();
}
return <Text>{this.props.names}</Text>
}
}
1. 如果我在页面加载如下代码，意味着程序会输出
<BBB names="余胜" />
<Text>余胜</Text>

<BBB names="预约" />
<Text>预约</Text>

我希望你传递一个方法进去
<BBB clicks={() => {
alert(1)
}} />
<Text>预约</Text>

2.

click = {} 这个是设置默认值
click: function() {
} 这个是定义方法
完全不同的逻辑

function aaa () {}
aaa: function(c1) { return 1;};
(c1) => { return 1};

class CCC {
_on({
click = {}
} = {}) {
click();
}

render() {
function click2() {
alert(1)
}
this._on({
click: function() {
click2()
}
});
return <Text>{this.props.names}</Text>
}
}

class CCC {
_on({
click = {}
} = {}) {
click();
}

render() {
function click() {
alert(1)
}
this._on({
click: function() {
click()
}
});
return <Text>{this.props.names}</Text>
}
}