Question

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

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中的Card更改为onPress={onCardPress(message)}，但是我知道这不起作用，因为我正在调用函数，而不是将函数对象传递给{{ onPress中的1}}。在仍然能够从父组件TouchableOpacity传递TouchableOpacity参数的同时，删除message中箭头功能的“正确”方法或最佳做法是什么？

Answer 1

如果要避免使用箭头功能，则必须使用bind()。箭头功能将automatically bind "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)}
            />
        )
     }
 }

Answer 2

您可以这样做：

class Card extends Component {
    pressHandler = () => this.props.onCardPress(this.props.message);

    render() {
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={this.pressHandler.bind(this)}
            />
        );
    } }

Answer 3

据我了解，问题在于在sqoop import --connect jdbc:mysql://10.6.162.58/test_alpha --username pbd -P --table posts --hive-import --hive-database test_root --hive-table posts1 --hive-drop-import-delims --null-string '\\N' --null-non-string '\\N' --target-dir /test_hive_root/2内调用bind，或从另一个lambda返回处理程序，因为这每次都会创建一个新函数。解决此问题的常规方法是将处理程序函数绑定到其他位置，例如在构造函数中。在您的情况下，可能看起来像这样：

render

Answer 4

为您提供替代选项，因为上面的帖子已经回答了箭头功能。

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

Answer 5

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

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

将参数传递给prop函数而不使用箭头函数

5 个答案: