React中通过props传递showIcon函数给子组件报错不是函数如何解决

你遇到的showIcon is not a function报错是多个基础语法、规范错误共同导致的，所有问题点如下：

• React自定义组件必须首字母大写，你定义的anItem是小写开头，React会将其识别为原生HTML标签，不会按照自定义组件处理props传递，这是报错的核心原因
• 多处拼写错误：
  1. Row组件中li的点击事件里把removeIcon拼写成了reomveIcon
  2. anItem组件里把props拼写成了porps
  3. anItem组件导出时把组件名拼写成了anlItem，和定义的组件名不一致
• 子组件传递props语法错误：给icon传值时没有加花括号，应该写成icon={iconState}
• 子组件点击事件逻辑错误：你写的() =>{props.showIcon}只引用了函数没有执行，同时括号配对错误，需要改成调用形式() => props.showIcon()
• Row组件缺少useState的导入，运行也会报错

修正后的完整代码如下：

// Component A Row
import { useState } from 'react'
import AnItem from './AnItem';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

function Row(props) {
    const [iconState, setIconState] = useState([]);
    const icon = <FontAwesomeIcon icon={["fas", "check"]}/>
    // 子组件调用控制图标显示
    const showIcon = ()=>{
      setIconState([icon])
    }
    // 点击行区域隐藏图标
    const removeIcon = ()=>{
      setIconState([])
    }
    
    let item = [<AnItem icon={iconState} showIcon={showIcon}/>]
    
    return (
        <li className="day-row check faderin" onClick={removeIcon}>
          {item}
        </li>
    )
}

// Component B AnItem 
function AnItem(props) {
  return (
    <div onClick={() => props.showIcon()}>{props.icon}</div>
  )
}

export default AnItem

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