[英]Pass parameters to prop function without using an arrow function
I've heard that passing an arrow function as a prop is not ideal because it creates a new function every time which will lead to performance issues. 我听说传递箭头函数作为道具并不理想,因为每次都会创建一个新函数,这将导致性能问题。 However, I'm not entirely sure how to completely move away from them, as can be seen by the example below:
但是,我不完全确定如何完全脱离它们,如以下示例所示:
class Home extends Component {
onCardPress = (message) =>{
alert(message)
}
render(){
return(
<View>
<Card
onCardPress={this.onCardPress}
message="Hello world!"
/>
</View>
)
}
}
class Card extends Component {
render(){
const { onCardPress , message } = this.props;
return(
<TouchableOpacity
activeOpacity={0.8}
onPress={()=>{onCardPress(message)}}
/>
)
}
}
I have tried changing onPress
in Card
to be onPress={onCardPress(message)}
, but I know this doesn't work because I am invoking the function rather than passing a function object to the onPress
of TouchableOpacity
. 我试图改变
onPress
在Card
是onPress={onCardPress(message)}
,但我知道这并不工作,因为我调用该函数,而不是通过一个函数对象的onPress
的TouchableOpacity
。 What is the 'proper' way or best practice to remove the arrow function in TouchableOpacity
while still being able to pass the message
parameter from the parent component Home
? 在仍然能够从父组件
Home
传递message
参数的同时,在TouchableOpacity
删除箭头功能的“正确”方法或最佳做法是什么?
If you want to avoid arrow function, you have to use bind()
. 如果要避免使用箭头功能,则必须使用
bind()
。 Arrow functions will automatically bind "this" . 箭头功能将自动绑定“ this” 。
class Home extends Component {
constructor(props) {
super(props);
this.onCardPress = this.onCardPress.bind(this);
}
onCardPress (message) {
alert(message)
}
render(){
return(
<View>
<Card
onCardPress={this.onCardPress}
message="Hello world!"
/>
</View>
)
}
}
class Card extends Component {
render(){
const { onCardPress , message } = this.props;
return(
<TouchableOpacity
activeOpacity={0.8}
onPress={onCardPress(message)}
/>
)
}
}
You could do: 您可以这样做:
class Card extends Component {
pressHandler = () => this.props.onCardPress(this.props.message);
render() {
return (
<TouchableOpacity
activeOpacity={0.8}
onPress={this.pressHandler.bind(this)}
/>
);
} }
As I understand it, the issue lies with calling bind
inside of render
, or returning the handler from yet another lambda, as this will create a new function each time. 据我了解,问题在于调用
render
内部的bind
或从另一个lambda返回处理程序,因为这每次都会创建一个新函数。 The conventional way to get around this problem is to bind your handler functions elsewhere -- like in the constructor. 解决此问题的常规方法是将处理程序函数绑定到其他位置,例如在构造函数中。 In your case, that could look like this:
在您的情况下,可能看起来像这样:
constructor(props) {
....
this.onCardPress = this.onCardPress.bind(this);
}
...
<Card
onCardPress={this.onCardPress}
message="Hello world!"
/>
Given you alternative option as arrow function already answered in above post. 给你替代选项作为箭头功能已经在上面的帖子中回答。
class Card extends Component {
onClick = () => {
const { onCardPress, message } = this.props;
onCardPress(message);
}
render(){
const { onCardPress , message } = this.props;
return(
<TouchableOpacity
activeOpacity={0.8}
onPress={this.onClick}
/>
)
}
}
You don't need to pass the message prop because you can access it anywhere in the component. 您不需要传递消息道具,因为您可以在组件中的任何位置访问它。 Just supply a function in the onPress prop.
只需在onPress属性中提供功能即可。 And in that function, just access the message prop of the component.
在该功能中,只需访问组件的消息属性。
class Home extends Component {
onCardPress = (message) => {
alert(message)
}
render() {
return (
<View>
<Card
onCardPress={this.onCardPress}
message="Hello world!"
/>
</View>
)
}
}
class Card extends Component {
onClick = () => {
const { message, onCardPress } = this.props;
onCardPress(message);
};
render() {
return (
<TouchableOpacity
activeOpacity={0.8}
onPress={this.onClick}
/>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.