Question

我试图制作一个具有背景图像的反应组件，该图像由JSON提供为url。这个JSON里面有多个对象，其中一个（让我们称之为$(detailsRightMenu).kendoDropDownList(); $(detailsRightMenu).parent().on("keydown", function(e){ if (e.keyCode === 27 ) { $('detailsRightMenu', this).data("kendoDropDownList").close(); } });）中有url（imgObj）。

现在，我想使用该网址作为背景图片，但却失败了。

这是我尝试做的事情：

imgObj.url

我尝试了import React from 'react'; import styled from 'styled-components'; const Container = styled.div` background-image: `url(${props => props.imgObj.url})` // this is where I think the problem is `; const Component = ({ imgObj, otherStuff }) => ( <Container> {otherStuff} </Container> ); export default Component行的几种不同变体，但无法正确使用。

我在这里使用样式组件，但老实说，我对任何有效的解决方案感到满意。

Answer 1

对于任何需要解决方案的人，使用样式化组件

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
background-image: `url(${props => props.imgObj.url})` // this is where I think the problem is
`;

const Component = ({ imgObj, otherStuff }) => (
<Container imgObj> // <=== Here!
    {otherStuff}
</Container>
);

export default Component

原因是您忘记在容器样式组件中插入imgObj道具。因此组件不知道在哪里找到props.imgObj。

Answer 2

我没有使用styled-components，但您可以将背景图像定义为内联样式，如下所示：

...
<div style={{backgroundImage: `url(${props.imgObj.url})`}} >
</div>
...

Answer 3

你的“背景图像”价值已经回归了。请记住，样式组件会生成实际的CSS，因此不会生成有效的CSS值。

此外，我建议您在网址周围添加引号，以避免出现意外错误：

const Container = styled.div`
  background-image: url('${props => props.imgObj.url}');
`;

总而言之，不要忘记它是你正在生成的实际CSS，如果可能的话不要忘记分号（尽管那些通常是自动完成的，如果它们丢失了，并且对你要插入的内容保持警惕：）

Answer 4

如果imgObj未定义，background-image将完全不显示。

import React from 'react'
import styled from 'styled-components'

const Container = styled.div`
  ${props => props.imgObj && props.imgObj.url && 
    `background-image: (${props.imgObj.url})`
  }
`

const Component = ({ imgObj, otherStuff }) => (
<Container imgObj={imgObj}>
    {otherStuff}
</Container>
)

export default Component

React.js中带有样式组件的动态背景图像

4 个答案: