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，...但是我想在浏览器中显示原始数据（它在编辑器中应该是相同的，确切地说，我想在编辑器中向浏览器显示原始代码），如下所示：< / p>

<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'}>

可以通过使用javascript模板文字来实现。

资源：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`}>

根据数据动态输出所需的内容。

ReactJs返回原始数据

1 个答案: