Question

我如何进行这项工作？

img作为<Child />的道具传递，我想在悬停<Parent />时更改孩子的背景图像

<Parent>
  <Child img={'path/to/img.png'}/>
</Parent>

const Child = styled.div`

`;

const Parent = styled.div`
  &:hover {
    ${Child} {
      background-image: url(${props => props.img});
    }
  }
`;

Answer 1

因此，我确实设法解决了部分问题（也许剩下的事情对您来说并不重要，请告诉我）。

首先是小提琴，然后进行解释：

const img1 = "https://images.pexels.com/photos/2047905/pexels-photo-2047905.jpeg?cs=srgb&dl=apple-device-art-colorful-2047905.jpg&fm=jpg";
const img2 = "https://images.pexels.com/photos/2027104/pexels-photo-2027104.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
const img3 = "https://images.pexels.com/photos/2029478/pexels-photo-2029478.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";

window.styled = window.styled.default;

function changeBG(props) {
    if (Array.isArray(props.children)) {   
        let a;
        props.children.forEach(el => {
            if (el.type.styledComponentId === Child.styledComponentId) {
                a = el.props.bgImg;
            }
        });
        return a;
    } else {
        return (props.children.type.styledComponentId === Child.styledComponentId)
            ? props.children.props.bgImg
            : ""
    }    
}

const Child = styled.div`
    width: 200px;
    height: 100px;
    border: 1px solid green;
    background-image: url("${img2}");
    background-size: contain;
`;

const Parent = styled.div`
    width: 400px;
    height: 200px;
    border: 1px solid rgba(0,0,0,0.5);

    &:hover {
        ${Child} {            
            background-image: url("${props => changeBG(props)}");
        }
    }
`;

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <Parent>
                <Child bgImg={img1} />
                <Child bgImg={img3} />
            </Parent>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

const img1 = "https://images.pexels.com/photos/2047905/pexels-photo-2047905.jpeg?cs=srgb&dl=apple-device-art-colorful-2047905.jpg&fm=jpg";
const img2 = "https://images.pexels.com/photos/2027104/pexels-photo-2027104.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
const img3 = "https://images.pexels.com/photos/2029478/pexels-photo-2029478.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";

window.styled = window.styled.default;

function changeBG(props) {
    console.log(props.children);
    if (Array.isArray(props.children)) {   
        let a;
        props.children.forEach(el => {
            if (el.type.styledComponentId === Child.styledComponentId) {
                a = el.props.bgImg;
            }
        });
        return a;
    } else {
        return (props.children.type.styledComponentId === Child.styledComponentId)
            ? props.children.props.bgImg
            : ""
    }    
}

const Child = styled.div`
    width: 200px;
    height: 100px;
    border: 1px solid green;
    background-image: url("${img2}");
    background-size: contain;
`;

const Parent = styled.div`
    width: 400px;
    height: 200px;
    border: 1px solid rgba(0,0,0,0.5);

    &:hover {
        ${Child} {            
            background-image: url("${props => changeBG(props)}");
        }
    }
`;

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <Parent>
                <Child bgImg={img1} />
                <Child bgImg={img3} />
            </Parent>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.4.10/styled-components.min.js"></script>
<div id='root'></div>

基本上，Parent样式化组件的行为与您编写的一样，希望它运行名为changeBG的函数。这样，检查el.type.styledComponentId === Child.styledComponentId便可以确定孩子的类型为Child：如果是，我们可以使用props.bgImg。

但是，如果Parent组件具有非Child类型的子代，则可能会有一些问题。并且，如果有多个Child组件作为{{1 }}，但我仍然无法在悬停时显示其他背景图像。但是，我问这是否需要？我也可以尝试为此找到解决方法。

Answer 2

希望这可以为您提供帮助！

   &:hover ${Child}{
      background-image: url(${props => props.image && css`${props.image}`});
   }

这是有效的示例https://codepen.io/hardik-chaudhary/pen/rKEKWG

更新代码

在子级而不是父级中使用悬停代码。一切都很好。我还更新了笔（https://codepen.io/hardik-chaudhary/pen/rKEKWG）中的代码。

const Child = styled.div`
   ${Parent}:hover & {
      background-image: url(${props => props.image && css`${props.image}`});
  }
`;

样式化的组件，是否引用其他组件并使用其道具？

2 个答案: