使用React JS中的内联CS设置背景图像URL

Question

我已经使用React方法设置了Inline CSS，但编译器显示"意外的令牌错误"，其中我已经声明了图像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

问题与变量IT自我相关，而是您放在哪里。现在，它是在您的课内定义的，但没有在任何方法内定义。

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

另外，带有URL的background-image需要在括号之间引用。因此，从：

中更改它

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

to：

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 2

您无法直接在组件类中声明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>
        );  
    }