我正在尝试在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渲染如下:
您可以尝试将JSX插入标签prop而不是字符串:
<RadioButton
key="Content-Protocol-RadioButton-http"
label={<div>HTTPS Device API {this.referenceDocsLink('http')}</div>}
name="protocol-http"
value="http"
/>
但这一切都取决于RadioButton
是否接受JSX作为道具价值类型。