React Native如何将函数作为Props传递给子组件？

嘿，我完全懂你想做的事——打造一个能让使用者自定义点击行为的可复用按钮组件对吧？先把你的代码补全并修正，一步步给你讲清楚怎么实现~

首先，咱们先完善父组件App.js的代码，定义好你想要的点击处理函数，再把它作为props传给子组件：

// App.js
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import TouchableButton from './components/touchable-button';

export default class App extends Component {
  constructor() {
    super();
  }

  // 自定义的点击处理函数，你可以在这里写任何你想要的逻辑
  handleButtonPress = () => {
    console.log("按钮被点击啦！");
    // 举个例子：可以在这里更新组件状态、跳转到其他页面等等
  }

  render() {
    return (
      <View style={styles.container}>
        {/* 把我们的点击函数作为`onPress`属性传给TouchableButton */}
        <TouchableButton onPress={this.handleButtonPress} buttonText="点我试试" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
});

接下来是核心的可复用组件TouchableButton.js，这里我们只需要接收父组件传过来的onPress函数，把它绑定到原生的可点击组件上就行：

推荐：函数式组件写法（更简洁，适合新手） #

// components/touchable-button.js
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

// 通过解构赋值直接拿到props里的onPress和buttonText
const TouchableButton = ({ onPress, buttonText }) => {
  return (
    <TouchableOpacity 
      style={styles.button}
      // 把传入的onPress函数绑定到原生组件的点击事件上
      onPress={onPress}
    >
      <Text style={styles.buttonText}>{buttonText}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
});

export default TouchableButton;

如果你习惯用类组件，也可以这么写：

// components/touchable-button.js（类组件版本）
import React, { Component } from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

class TouchableButton extends Component {
  render() {
    // 从this.props中取出传入的属性
    const { onPress, buttonText } = this.props;
    return (
      <TouchableOpacity 
        style={styles.button}
        onPress={onPress}
      >
        <Text style={styles.buttonText}>{buttonText}</Text>
      </TouchableOpacity>
    );
  }
}

// 样式和上面一致
const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
});

export default TouchableButton;

几个关键注意点： #

• 传递函数时，要传函数本身，而不是函数调用！比如别写成onPress={this.handleButtonPress()}，这样会在组件渲染时直接执行函数，而不是点击时触发。正确写法是onPress={this.handleButtonPress}（类组件）或者直接传函数引用。
• 如果需要给点击函数传递参数（比如点击按钮时要传一个商品ID），可以用箭头函数包裹：

  // 在父组件里这么传
  <TouchableButton onPress={() => this.handleButtonPress(itemId)} buttonText="点击我" />
  

  然后在父组件的处理函数里接收参数：

  handleButtonPress = (itemId) => {
    console.log(`点击了ID为${itemId}的按钮`);
  }
  

内容的提问来源于stack exchange，提问作者Jerred Shepherd