Превратить строку в JSX - проблема с фигурными скобками

Question

Я получаю строку из бэкэнда:

     "<img src={props.url} className="image"></img>"

И на интерфейсе React мне нужно превратить ее в компонент React. Я использую dangerouslySetInnerHTML, но это дает мне это в HTML:

<img src="{props.url}" class="image">

Итак, проблема в том, что src="{props.url}" - атрибут sr c преобразуется в строку вместо встроенного Javascript поэтому мое изображение не будет загружаться.

Есть идеи, как ее решить?

Answer 1

Вы можете попробовать это, хотя может быть лучший подход, это делает вашу работу -

const imageVar = <img src="{props.url}" class="image"> //after using dangerouslySetInnerHTML

cont imageSrc = eval(imageVar.props.src.replace(/['{}]+/g, ""));

return(<img src={srcvar} class={imageVar.props.class} />);

Работа демо

Надеюсь, это поможет вам. :)

Answer 2

Для этого есть обходной путь, и он не включает никаких внешних библиотек. Допустимый jsx может храниться в массивах, как показано:

const html = [<img src={img} className="image"></img>]
return <div>{ html }</div>

Если вы сохраняете html в массиве, его можно отобразить очень просто.