时间戳

首页 > 解决方案 > 检查 `InputOption` 的渲染方法

reactjs - 检查 `InputOption` 的渲染方法

问题描述

尝试渲染组件但收到错误消息。

下面的代码运行正确

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

export default InputOption

一旦我开始调用道具，它就会标记一个错误。

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

export default InputOption

在线阅读可能与导入/导出有关，但我无法理解它。

标签： reactjsreact-propsreact-component

解决方案

使用对象解构来获取道具 :)

默认情况下，一个组件会得到一个 prop。
例如： function InputOption(props){...}

这个函数是一个有效的 React 组件，因为它接受一个带有数据的“props”（代表属性）对象参数并返回一个 React 元素。我们称此类组件为“函数组件”，因为它们实际上是 JavaScript 函数。

function InputOption({Icon, title, color}){...}

通过解构，您可以获得道具对象的所有“属性”。

编辑

请提供更多信息（您实际上是如何调用 InputOption 组件以及关于 Icon 组件的）

检查此沙箱

推荐阅读