reactjs - 在react js中使用内联css设置背景图片url

Question

我已经使用react方法设置了内联css，但编译器显示“意外的 token 错误”，其中我声明了图像url，这是我的文件代码 -

class Aboutus extends React.Component {
    constructor(props){
        super(props);
        document.title = "About Us";
    }

    var imgUrl_1 = '/images/about/parallax.jpg';
    const style_1 = {
            padding: '250px 0', 
            backgroundImage: 'url('+imgUrl_1+')',
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
        };

    var img_url2 = '/images/team/3.jpg';
    const style_2 = {
        backgroundImage: 'url('+img_url2+')', 
        backgroundPosition: 'center center no-repeat',
        backgroundSize: 'cover',    
        };

    const style_3 = { backgroundColor: '#F5F5F5'};  

    render(){
        return(
            <DefaultLayout>
                <section id="page-title" class="page-title-parallax page-title-dark" style={style_1} data-stellar-background-ratio="0.4">

                    <div class="container clearfix">
                        <h1>About Us</h1>
                        <span>Everything you need to know about our Company</span>
                        <ol class="breadcrumb">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Pages</a></li>
                            <li class="active">About Us</li>
                        </ol>
                    </div>

                </section>


                <section id="content">
                    <div class="content-wrap">
                        <div class="row common-height clearfix">
                            <div class="col-sm-5 col-padding" style={style_2} ></div>
                            <div class="col-sm-7 col-padding">
                                <div>
                                    <div class="heading-block">
                                        <span class="before-heading color">CEO &amp; Co-Founder</span>
                                        <h3>John Doe</h3>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row common-height bottommargin-lg clearfix">
                            <div class="col-sm-7 col-padding" style={style_3} >
                                <div>
                                    <div class="heading-block">
                                        <span class="before-heading color">Developer &amp; Evangelist</span>
                                        <h3>Mary Jane</h3>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                </section>
            </DefaultLayout>
        );  
    }
}

export default Aboutus;

这里出错 -

Unexpected token (11:5)    9 |  }
  10 |  
> 11 |  var imgUrl_1 = '/images/about/parallax.jpg';

请让我知道我在这里做错了什么。

Answer 1

问题不在于变量本身，而在于你把它放在哪里。现在它是在类中定义的，但不在任何方法中。

尝试将其移至构造函数或渲染方法。

此外，带有 url 的 background-image 需要在括号之间添加引号。因此，将其更改为:

backgroundImage: 'url('+imgUrl_1+')'

至:

backgroundImage: 'url("'+imgUrl_1+'")'

<小时/>

替代方案 1

这是一种可能的解决方案。将代码更改为:

class Aboutus extends React.Component {
  constructor(props){
    super(props);
    document.title = "About Us";
  }

  render(){
    var imgUrl_1 = '/images/about/parallax.jpg';
    const style_1 = {
        padding: '250px 0', 
        backgroundImage: 'url("'+imgUrl_1+'")',
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
    };

    var img_url2 = '/images/team/3.jpg';
    const style_2 = {
      backgroundImage: 'url("'+img_url2+'")', 
      backgroundPosition: 'center center no-repeat',
      backgroundSize: 'cover',    
    };

    const style_3 = { backgroundColor: '#F5F5F5'};

    return (
      ...

<小时/>

替代方案 2

你还可以这样做:

class Aboutus extends React.Component {
  constructor(props){
    super(props);
    document.title = "About Us";
    this.imgUrl_1 = '/images/about/parallax.jpg';
    this.style_1 = {
        padding: '250px 0', 
        backgroundImage: 'url("'+this.imgUrl_1+'")',
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
    };
    this.img_url2 = '/images/team/3.jpg';
    this.style_2 = {
      backgroundImage: 'url("'+this.img_url2+'")', 
      backgroundPosition: 'center center no-repeat',
      backgroundSize: 'cover',    
    };
    this.style_3 = { backgroundColor: '#F5F5F5'};
  }

  render(){    
    return(
      ...

然后在渲染中使用 this.imgUrl_1 等。