时间戳

首页 > 解决方案 > 在不使用箭头函数的情况下将参数传递给 prop 函数

reactjs - 在不使用箭头函数的情况下将参数传递给 prop 函数

问题描述

我听说将箭头函数作为道具传递并不理想，因为它每次都会创建一个新函数，这会导致性能问题。但是，我不完全确定如何完全摆脱它们，如下例所示：

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)}}
            />
        )
    }
}

我曾尝试更改onPress为Cardbe onPress={onCardPress(message)}，但我知道这不起作用，因为我正在调用函数而不是将函数对象传递给onPressof TouchableOpacity。TouchableOpacity在仍然能够message从父组件传递参数的同时删除箭头功能的“正确”方式或最佳实践是Home什么？

标签： reactjsreact-nativearrow-functionsreact-props

解决方案

您不需要传递 message 道具，因为您可以在组件中的任何位置访问它。只需在 onPress 道具中提供一个功能。在该函数中，只需访问组件的 message 属性。

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}
      />
    )
  }
}

推荐阅读