当前位置： 移动技术网 > IT编程>网页制作>CSS > ReactDom语法糖Jsx：插入style属性修改background的语法

ReactDom语法糖Jsx：插入style属性修改background的语法

2019年01月09日  | 移动技术网IT编程  | 我要评论

reactdom 语法糖jsx：插入style属性 修改background的语法

jsx reactdom 行间style 在使用react渲染试图的时候，需要用jsx语法糖进行自动转换。

一、插值表达式{}

在jsx中，插入变量时，需要使用差值表达式。

如：我们在元素中想引入图片路径，但是图片路径可能会经常更换，不能写死。就将路径存在一个变量imgurl（变量名自取）里，然后如下图插入即可。

let imgurl ="https://huaban.com/pins/1856693856/"
//这里插入imgurl路径，需要用{插值表达式}包起来

二、插入行间style属性的语法

当我们react中想实时修改一个p元素的背景图片，而非img元素，就无法修改src；

而是需要通过行间style样式，修改背景图片backgroundimg，需要注意的是：

①行间样式style比较特殊,需要用两个花括号的格式，不然就会报错，写作：



 

//这是正确写法，不能写style="width:100px",会报错

②在行间style属性插入图片的路径，即 将插入变量imgurl，我们就需要这样写才可以：


let imgurl ="https://huaban.com/pins/1856693856/"

 


 


解析：先插入style={{backgroundimage: 'url()'}}


再把变量通过字符串拼接的方式加进去 style={{backgroundimage: 'url(' + imgurl + ')'}}



                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
                        点击进行留言回复
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网