Question

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

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

您无法直接在Component类中声明string var

在用例函数的构造函数中指定它

constructor() {
     super();

      this.imgUrl_1 = '/images/about/parallax.jpg';  
      this.img_url2 = '/images/team/3.jpg';
}

render(){
 const style_1 = {
        padding: '250px 0', 
        backgroundImage: `url(${this.imgUrl_1})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
    };
 const style_2 = {
    backgroundImage: `url(${this.imgUrl_2})`, 
    backgroundPosition: 'center center no-repeat',
    backgroundSize: 'cover',    
    };
        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>
        );  
    }

Answer 2

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

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

此外，带有网址的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等。

Answer 3

尝试这样：backgroundImage：'url（“'+ imgUrl_1 +'”）'

constructor() {
     super();

      this.imgUrl_1 = '/images/about/parallax.jpg';  
      this.img_url2 = '/images/team/3.jpg';
}

render(){
 const style_1 = {
        padding: '250px 0', 
        backgroundImage: `url(${this.imgUrl_1})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
    };
 const style_2 = {
    backgroundImage: `url(${this.imgUrl_2})`, 
    backgroundPosition: 'center center no-repeat',
    backgroundSize: 'cover',    
    };
        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>
        );  
    }

设置背景图像网址使用内联css反应js

3 个答案:

备选方案1

备选方案2