styled-компоненты, ссылаясь на другие компоненты и использовать его реквизиты?

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

Надеюсь, что это может вам помочь!

   &: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}`});
  }
`;

Answer 2

Итак, мне удалось решить часть проблемы (возможно, то, что осталось, не важно в вашем случае, дайте мне знать).

Сначала скрипка, потом объяснения:

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 Компонента как дочернего элемента Parent, у меня все еще нет смог отобразить другое фоновое изображение при наведении .. Но, я спрашиваю, это нужно? Я могу попытаться найти обходной путь для этого тоже.