React Native 中函数作为 props 传递失效的解决方案-js教程-PHP中文网

React Native 中函数作为 props 传递失效的解决方案

在 react native 中，当将函数作为 prop 传递给自定义组件（如 searchbar）却报错“handleonfocus is not a function”时，根本原因在于组件函数参数未正确接收 props 对象，而是错误地将多个 props 拆解为独立形参，导致所有 props 实际都落入第一个参数中，其余均为 undefined。

在 react native 中，当将函数作为 prop 传递给自定义组件（如 searchbar）却报错“handleonfocus is not a function”时，根本原因在于组件函数参数未正确接收 props 对象，而是错误地将多个 props 拆解为独立形参，导致所有 props 实际都落入第一个参数中，其余均为 undefined。

这个问题并非 React Native 特有，而是源于对 React 函数组件参数机制的根本误解：所有 JSX 属性（props）都会被合并为一个单一的对象，作为组件函数的唯一参数传入。而原 SearchBar 组件的函数签名：

export default function SearchBar(
  border = false,
  iconSize,
  addStyles,
  placeholder = "search",
  handleOnFocus, // ❌ 错误：这不是独立参数，而是 props 对象的属性
  onChangeText,
  onBlur
)

实际等价于：

export default function SearchBar(props) {
  const border = props; // ✅ 所有 props 都进了这里！
  const iconSize = undefined;
  const handleOnFocus = undefined; // ❌ 因此始终为 undefined
}

因此，无论你在中如何传值，handleOnFocus 始终无法被正确读取。

✅ 正确做法是：使用对象解构语法接收 props，并为可选函数 prop 设置安全默认值（如空函数），避免运行时崩溃：

React Best Practices 2 0.1.0

React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。

下载

import { View, TextInput, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";

export default function SearchBar({
  border = false,
  iconSize = 20,
  addStyles,
  placeholder = "search",
  handleOnFocus = () => {}, // ✅ 安全默认：空函数
  onChangeText = () => {},
  onBlur = () => {},
}) {
  return (
    <view style="{[Styles.searchbarView," addstyles><ionicons name="search" size="{iconSize}" color="#666"></ionicons><textinput style="{{" flex: marginleft: fontsize: paddingvertical: placeholder="{placeholder}" placeholdertextcolor="#999" onchangetext="{onChangeText}" onfocus="{handleOnFocus}" onblur="{onBlur}" autocapitalize="none" autocorrect="{false}"></textinput></view>
  );
}

const Styles = StyleSheet.create({
  searchbarView: {
    height: 35,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 30,
    borderColor: "#1ACE2B",
    borderWidth: border ? 1 : 0,
    borderRadius: 7,
    paddingHorizontal: 10,
    marginHorizontal: 20,
    backgroundColor: "#f9f9f9",
  },
});

? 关键修正点总结：

✅ 使用 { ... } 解构 props 对象，而非按顺序罗列参数；
✅ 为 handleOnFocus、onChangeText、onBlur 等函数型 prop 提供默认空函数 () => {}，防止 undefined is not a function 报错；
✅ onFocus 和 onBlur 可直接赋值函数引用（如 onFocus={handleOnFocus}），无需额外箭头函数包裹，提升性能与可读性；
✅ border 等布尔型 prop 应参与样式逻辑（如 borderWidth: border ? 1 : 0），增强组件可控性。

? 在 StoreScreen 中调用时保持简洁清晰：

<searchbar border="{true}" placeholder="Search products..." handleonfocus="{()"> {
    console.log("Search bar focused");
    setIsSearchFocused(true);
  }}
  onChangeText={handleChangeText}
  onBlur={() => setIsSearchFocused(false)}
/></searchbar>

? 额外建议：