React InputOption组件调用props时触发render方法报错如何解决？

问题根源 #

React 函数组件仅接收一个props对象作为唯一入参，你当前的写法将Icon、title、color拆分为三个独立入参，会导致第一个参数Icon实际是完整的props对象，title、color均为undefined，尝试将非组件类型的值当做组件渲染就会触发render方法报错。

解决方案 #

推荐直接在参数位置解构props对象获取对应字段，正确写法如下：

function InputOption({ Icon, title, color }) {
    return( <div className='inputOption'>
        <Icon style={{color : color}}/>
        </div>
   )
}

export default InputOption

如果不习惯参数解构，也可以先接收完整props对象再按需取值：

function InputOption(props) {
    return( <div className='inputOption'>
        <props.Icon style={{color : props.color}}/>
        </div>
   )
}

export default InputOption

调用组件时保持正常传参即可：

// 示例调用，替换为你的实际图标组件、标题和色值
<InputOption Icon={HomeIcon} title="首页" color="#1890ff" />

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