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

发布时间：2020-12-15 09:32:29 所属栏目：百科来源：网络整理

导读：我已经使用react方法设置内联css但是编译器显示“意外令牌错误”,其中我声明了图像网址,这里是我的文件代码 – class Aboutus extends React.Component { constructor(props){ super(props); document.title = "About Us"; } var imgUrl_1 = '/images/about/

我已经使用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',};

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

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

解决方法

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

尝试将其移动到构造函数或render方法.

此外,带有网址的背景图片需要在括号之间加引号.
所以从以下方面改变：

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+'")',};

    var img_url2 = '/images/team/3.jpg';
    const style_2 = {
      backgroundImage: 'url("'+img_url2+'")',};

    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+'")',};
    this.img_url2 = '/images/team/3.jpg';
    this.style_2 = {
      backgroundImage: 'url("'+this.img_url2+'")',};
    this.style_3 = { backgroundColor: '#F5F5F5'};
  }

  render(){    
    return(
      ...

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!