Material-UI 包括带有单选按钮、复选框等标签的内联链接

Question

我正在尝试在 React 应用程序中包含与 Material-UI 单选按钮列表标签内联的动态链接。当我实现以下代码时，我看到[object Object] 代替了我希望显示参考文档链接的位置。我做错了什么？

referenceDocsLink(protocol) {
  return (
      <a
        className="Content-Documentation-Button"
        href={`${BASE_DOCS_LINK}/reference/${protocol}/`}
        rel="noopener noreferrer"
        target="_blank"
      >
        Reference Docs
      </a>
  );
}

<RadioButtonGroup name="connectionProtocol" >
  <RadioButton
    key="Content-Protocol-RadioButton-http"
    label={`HTTPS Device API ${this.referenceDocsLink('http')}`}
    name="protocol-http"
    value="http"
  />
  <RadioButton
    key="Content-Protocol-RadioButton-mqtt"
    label={`MQTT ${this.referenceDocsLink('mqtt')}`}
    name="protocol-mqtt"
    value="mqtt"
  />
</RadioButtonGroup>

UI 渲染如下：

Answer 1

您可以尝试将 JSX 插入 label 属性而不是字符串：

<RadioButton
    key="Content-Protocol-RadioButton-http"
    label={<div>HTTPS Device API {this.referenceDocsLink('http')}</div>}
    name="protocol-http"
    value="http"
  />

但这一切都取决于RadioButton 是否接受 JSX 作为 prop 值类型。