Как решить проблему с рендером строки в reactjs (обратные слеши, хтмл, спецсимволы)?

Question

[SpbSprut]

Допустим есть строчка в базе (допустим комментарий от пользователя)

ssss\ss<script>alert(123)</script>ss\\ssssss\\\sssss\\\\sssss\\\\\ssss

Надо вывести этот комментарий ТАКЖЕ как он есть от пользователя.

Пока лучшее решение, которое у меня получилось это:

file[ test.twig ]

<div id="content"></div>

<script type="text/javascript">
        var comment = '{{ comment|e('html')|e('js') }}';
</script>

file [ react.js ]

class H1 extends React.Component {
    render() {
        return <div dangerouslySetInnerHTML={{__html: this.props.comment}}></div>;
    }
}

ReactDOM.render(
    <H1 comment={comment} />,
    document.getElementById('content')
);

Если не использовать e('js') то вылезает проблема с обратными слешами в js, если не использовать e('html') перед e('js') то обрезаются html теги

Меня устроит решение как со стороны twig так и со стороны reactjs. Нужно что бы строка отображалась после render в reactjs так же как она есть. Спасибо.

Answer 1

[SpbSprut]

так я похоже перемудрил
вот более красивый вариант

<script type="text/javascript">
        var comment = '{{ comment|e('js') }}';
</script>

тогда можно в реакте стандартно

class H1 extends React.Component {
    render() {
        return <h1>{this.props.comment}</h1>;
    }
}

на это уже можно смотреть без тошноты