javascript - 在 React 中参数化事件处理程序

Question

我正在使用https://github.com/olahol/react-tagsinput在我的应用程序中创建标签的库。当我尝试将 renderTag 属性绑定(bind)到自定义函数时，发生了非常奇怪的事情。我认为我错过了与 JavaScript 相关的一点，而不是 React。

尽管 typeof tagType 在组件上返回“string”，但当我尝试渲染它时，它会渲染 [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' })}
      ...
 />

Answer 1

由于您在 JSX 中使用字符串连接 <span className="react-tagsinput-tagtype"> {tagType} </span> + ' | ' ，<span>...</span>打印为 [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>
)