我正在使用https://github.com/olahol/react-tagsinput库在我的应用程序中创建标签。当我尝试将renderTag属性绑定到自定义函数时,发生了非常奇怪的事情。我想我缺少与JavaScript有关的观点,没有反应。
即使typeof tagType在组件上返回“字符串”,当我尝试呈现它时,它也会呈现[object Object] |你好。为什么渲染对象?
defaultRenderTag = (customProps, props) => {
let { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props
let { tagType } = customProps;
// This returns 'string'
console.log(typeof tagType)
return (
<span key={key} {...other}>
{/* The type of the tag: */}
{
tagType ? (
// This returns "[object Object] | work"
<span className="react-tagsinput-tagtype"> {tagType} </span> + ' | '
) : null
}
{getTagDisplayValue(tag)}
{!disabled &&
<a className={classNameRemove} onClick={(e) => onRemove(key)} />
}
</span>
)
}
这是我使用上面功能的主要组件:
<TagsInput
...
renderTag={this.defaultRenderTag.bind(this, { tagType: 'personal' })}
...
/>
答案 0 :(得分:2)
由于您在JSX <span className="react-tagsinput-tagtype"> {tagType} </span> + ' | '
中使用字符串连接,因此<span>...</span>
打印为[Object object]。您可以尝试以下替代方法:
return (
<span key={key} {...other}>
{
tagType && <span className="react-tagsinput-tagtype"> {`${tagType} | `} </span>
}
{getTagDisplayValue(tag)}
{!disabled &&
<a className={classNameRemove} onClick={(e) => onRemove(key)} />
}
</span>
)