React中如何通过条件运算符正确向props传递函数？

核心问题分析 #

你遇到的情况大概率是两个原因导致的：

1. props命名非法：function是JavaScript的保留关键字，不能作为组件props的键名，这会导致传递的函数无法被组件正确识别，进而出现逻辑异常。
2. cursor状态或组件内调用逻辑错误：要么选中书籍时cursor没有被正确更新为有效对象，要么BookModal内部没有正确使用传入的函数，而是固定调用createBook。

分步解决 #

1. 修正props命名

把function改成合法的名称，比如onSubmit或handleBookAction：

<BookModal 
  open={open}
  setOpen={setOpen}
  book={cursor}
  setBook={setCursor}
  onSubmit={cursor == null ? createBook : editBook}
/>

2. 确认cursor状态更新是否正确

检查选中书籍时的setCursor调用，确保传入的是有效的书籍对象，而非null或undefined：

// 示例：书籍列表点击事件
const selectBook = (selectedBook) => {
  console.log('选中的书籍:', selectedBook); // 打印确认是否为有效对象
  setCursor(selectedBook);
};

3. 检查BookModal内的函数调用逻辑

确保BookModal内部是使用传入的props函数，而非硬编码调用createBook：

// BookModal组件示例
const BookModal = ({ open, setOpen, book, setBook, onSubmit }) => {
  const saveBook = () => {
    // 收集表单数据
    const bookData = { ...book, /* 表单字段 */ };
    onSubmit(bookData); // 调用传入的onSubmit，而非固定调用createBook
    setOpen(false);
  };

  return (
    // 模态框结构，保存按钮绑定saveBook
    <div className="modal">
      {/* 表单内容 */}
      <button onClick={saveBook}>保存</button>
    </div>
  );
};

4. 可选：简化逻辑（便于调试）

如果还是有问题，可以把判断逻辑抽到父组件的函数里，方便打印调试：

const handleBookSubmit = (bookData) => {
  console.log('当前cursor状态:', cursor); // 直接查看cursor是否为空
  cursor == null ? createBook(bookData) : editBook(bookData);
};

// 传递该函数给BookModal
<BookModal 
  open={open}
  setOpen={setOpen}
  book={cursor}
  setBook={setCursor}
  onSubmit={handleBookSubmit}
/>

内容的提问来源于stack exchange，提问作者Helen Barskaya