reactjs - Hur man infogar fetstilstaggar i en mallsträng i react och typescript

Jag har ett formulär som visas när en knapp trycks, rubriken på formuläret kommer att vara olika för varje objekt i en lista, jag kan ta bort dessa objekt. Jag skulle vilja att namnet på objektet i formulärrubriken är fetstilt men jag har svårt att implementera detta korrekt

min form ser ut som

render(): React.ReactNode {

 return (
  <FormGroup
    fieldId='example-form
    helperText={`do you want to delete <b>${this.props.item.name}</b>?`
    >
    </FormGroup>
   )
  }

detta skriver för närvarande ut <b>-taggarna. Jag har försökt tilldela this.props.item.name till en variabel som en sträng och använda bold() på den men det fungerade inte. Alla råd skulle uppskattas.

Svar #1

Du kan inte bädda in HTML i en sträng, vilket är en säkerhetsfunktion i React för att förhindra cross site scripting när användargenererat innehåll visas.

Men, det du faktiskt har här är JSX!

Så ändra helperText-typen till React.ReactNode och nu kan du skicka in ett fragment på följande sätt:

<FormGroup
  fieldId='example-form'
  helperText={
    <>
      do you want to delete <b>{this.props.item.name}</b>?
    </>
  }
/>

Svar #2

Att skicka HTML-tagg inuti template literals är inte tillåtet. Det kommer att rendera din HTML-tagg som en sträng. För att lösa det kan du skapa en JSX-variabel för din hjälpttext och skicka den till din helperText-prop i FormGroup-elementet.

render(): React.ReactNode {
 const helperText = <>do you want to delete <b>{this.props.item.name}</b></>;

 return (
   <FormGroup
    fieldId='example-form'
    helperText={helperText}
   >
   </FormGroup>
  )
}

Relaterade artiklar