ReactJ возвращают необработанные данные

Question

Я использую React для рендеринга некоторых компонентов.Код выглядит следующим образом:

render() {
        return (
            <div className='sources row-fluid top-logo-boxes'>
                <div className='sourceWrapper col-xs-4'>
                    <div className='source'>
                        <div className='logo-img'>
                            <a href='#'>
                                <div className={this.state.type+'-logo-'+this.state.themeType+' m-0-auto'}></div>
                            </a>
                        </div>
                        <div className='details'>
                            <div className='rating-star'>
                                <span className='image-responsive stars color'><span className={'m-0-auto rating-star-'+this.state.type}></span></span>
                            </div>
                            <div className='numb-reviews'>
                                <span>{this.state.numberReviews} </span>
                                <img className='icon-person' src='../assets/img/icon-person-dark.png' alt=''/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

Обычно браузер возвращает html, ... Но я хочу отображать в браузере необработанные данные (в редакторе должно быть то же самое, именно то, что я хочу отображать в необработанном виде)код в редакторе в браузер), например:

<div className='sources row-fluid top-logo-boxes'>
                <div className='sourceWrapper col-xs-4'>
                    <div className='source'>
                        <div className='logo-img'>
                            <a href='#'>
                                <div className={this.state.type+'-logo-'+this.state.themeType+' m-0-auto'}></div>
                            </a>
                        </div>
                        <div className='details'>
                            <div className='rating-star'>
                                <span className='image-responsive stars color'><span className={'m-0-auto rating-star-'+this.state.type}></span></span>
                            </div>
                            <div className='numb-reviews'>
                                <span>{this.state.numberReviews} </span>
                                <img className='icon-person' src='../assets/img/icon-person-dark.png' alt=''/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Я ищу много раз, но не могу найти ответ.Кто-нибудь, пожалуйста, помогите мне.Большое спасибо.

Answer 1

Я не совсем уверен, что получаю вопрос, но, глядя на ваш код, я думаю, что ответ - да.

Это:

<div className={this.state.type+'-logo-'+this.state.themeType+' m-0-auto'}>

может быть достигнуто с помощью шаблона JavaScriptliteral.

Ресурс: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).

Синтаксис использует обратные метки для окружения любого сочетания переменных JavaScript и фиксированного строкового текста, может выглядеть так:

<div className={`${this.state.type}-logo-${this.state.themeType}m-0-auto`}>

часть, к которой может потребоваться некоторое время, чтобы привыкнуть, состоит в том, что ваши переменные окружены ${ и }.Иногда это немного затрудняет чтение, но позволяет создавать все виды динамических стилей.

Следующий уровень возможностей связан с возможностью выполнять любую логику внутри выражений в строке шаблона.Вы можете делать что-то вроде этого:

<div className={`${this.state.type === 'dark' ? 'dark-theme' : 'default-theme'}-logo-${this.state.themeType}m-0-auto`}>

, где вы динамически выводите то, что вы хотите, основываясь на ваших данных.