如何将 react-i18next 与 Semantic UI 标签标签结合起来？

Question

I am using Semantic UI with the combination of [react-i18next][2] and need to make label string translatable , but this label has a HTML tag in it, for example span . However, it only accepts string which is hardcoded or variable.

Answer 1

This is not possible

The props for the FormControlLabel state that the label prop is The text to be used in an enclosing label element.

Check it here

You will have to make a custom label control for this element or extend FormControlLabel (highly suggest you don't extend)

Custom Label

Put your checkbox in as children add it should work, but you need to expand on the controls.

const CustomLabel = (props) => (
  <div dangerouslySetInnerHTML={{__html: t('login.accept')}} />
)

// implementation

<CustomLable />
<Checkbox />

Workaround

What you could do is strip the tags from your strings so that you get the plain text.

cleanText = strInputCode.replace(/<\\/?[^>]+(>|$)/g, "");